<Tabs initialValue="1">
  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
  <Tabs.Item label="proxies" value="2">Between the Web browser and the server, numerous computers and machines relay the HTTP messages.</Tabs.Item>
</Tabs>

<Tabs initialValue="1">
  <Tabs.Item label="http" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
  <Tabs.Item label="jumped" value="2" disabled />
</Tabs>

<Tabs initialValue="html" hideDivider>
  <Tabs.Item label="HTML" value="html">
    <Text mt={0}>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</Text>
  </Tabs.Item>
  <Tabs.Item label="CSS" value="css">
    <Text mt={0}>CSS is the language that we can use to style and lay out our web content,
    as well as adding behavior like animation.</Text>
  </Tabs.Item>
</Tabs>

<Tabs initialValue="html" hideDivider hideBorder leftSpace={0}>
  <Tabs.Item label="HTML" value="html">
    <Text mt={0}>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</Text>
  </Tabs.Item>
  <Tabs.Item label="CSS" value="css">
    <Text mt={0}>CSS is the language that we can use to style and lay out our web content,
    as well as adding behavior like animation.</Text>
  </Tabs.Item>
</Tabs>

<Tabs initialValue="1" align="center" leftSpace={0}>
 <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
    <Text mt={0}>Hello, this is our live broadcast on Twitch.</Text>
  </Tabs.Item>
  <Tabs.Item label={<><TwitterIcon/> Twitter </>} value="2">
    <Text mt={0}>The Components of React looks very cool.</Text>
  </Tabs.Item>
</Tabs>

<Tabs initialValue="1">
  <Tabs.Item label="Home" value="1">
    <Text>Hello!</Text>
  </Tabs.Item>
  <Tabs.Item label="About" value="2">
    <Text>Cool stuff.</Text>
  </Tabs.Item>
  <Tabs.Item label="About Us" value="3">
    <Text>Good people.</Text>
  </Tabs.Item>
  <Tabs.Item label="Features" value="4">
    <Text>Amazing.</Text>
  </Tabs.Item>
  <Tabs.Item label="Pricing" value="5">
    <Text>Very low.</Text>
  </Tabs.Item>
  <Tabs.Item label="Docs" value="6">
    <Text>Clear.</Text>
  </Tabs.Item>
  <Tabs.Item label="Profile" value="7">
    <Text>Extraordinary person.</Text>
  </Tabs.Item>
  <Tabs.Item label="Settings" value="8">
    <Text>Easy to tweak.</Text>
  </Tabs.Item>
  <Tabs.Item label="Dashboard" value="9">
    <Text>Charts.</Text>
  </Tabs.Item>
  <Tabs.Item label="Policies" value="10">
    <Text>Privacy focused.</Text>
  </Tabs.Item>
</Tabs>

() => {
  const [value, setValue] = useState('1')
  const switchHandler = () => setValue('2')
  const changeHandler = val => setValue(val)
  return (
    <>
      <Button scale={1/3} font="12px" onClick={switchHandler}><Text>Select <Code>Extensible</Code></Text></Button>
      <Spacer h={.5} />
      <Tabs value={value} onChange={changeHandler}>
        <Tabs.Item label="stateless" value="1">HTTP is stateless, but not sessionless.</Tabs.Item>
        <Tabs.Item label="extensible" value="2">Introduced in HTTP/1.0, HTTP headers make this protocol easy to extend and experiment with.</Tabs.Item>
      </Tabs>
    </>
  )
}