```jsx
import { Title, Table, Flex, Box } from '@ui/components';

<Flex layout="col">
  <Tabs>
    <div label="Gator">
      <Box>
        <Title level={4}>Alligator</Title>
        <p><b>See ya later, <em>alligator!</em></b> Fugit praesentium harum earum molestiae blanditiis vel exercitationem. Officia laborum sit repudiandae, doloribus obcaecati ut, quasi modi eligendi ex quibusdam fugit. Velit voluptatem animi repellat laboriosam cumque obcaecati magni libero.</p>
      </Box>
    </div>
    <div label="Croc">
      <Box>
        <Title level={4}>Crocodile</Title>
        <p><b>After 'while, <em>crocodile!</em></b> Ut voluptate consequatur saepe quos maiores. Vel repellat fuga nemo minima dolorum aliquam quasi, delectus, maiores enim repellendus quam nesciunt aperiam voluptas velit natus modi. Nam quaerat excepturi officia ipsum?</p>
      </Box>
    </div>
    <div label="Sarcosuchus">
      <Box>
        <Title level={4}>Sarcosuchus</Title>
        <p><b>This tab is <em><strike>extinct</strike></em>.</b> Aspernatur harum eos ullam. Error, blanditiis voluptatum? Dolorum quod perspiciatis, repellendus ipsum alias velit itaque tempore deleniti explicabo suscipit architecto aliquid ratione quasi repudiandae quia quam nisi quisquam hic. Numquam.</p>
      </Box>
    </div>
    <div label="Details">
      <Box>
        <Table
          head={[['Species', 'Status']]}
          body={[
            ['Alligator', 'extant'],
            ['Crocodile', 'extant'],
            [<strike>Sarcosuchus</strike>, 'extinct'],
          ]}
          striped={false}
          style={{width: '100%'}}
          />
      </Box>
    </div>
  </Tabs>
</Flex>
```