component-implementation-example-tailwind-oriented.tsx

// Not good
const Page = () => (
  <main className="bg-background">
    <section className="p-6">
      <h1 className="text-2l font-bold">A page title</h1>
      <p className="text-md text-foreground">Content...</p>
      <ul className="list-disc">
        <li>List Item 1</li>
        <li>List Item 2</li>
      </ul>
    </section>
  </main>
)

// Tailwind oriented
const Page = () => (
  <Main>
    <Section>
      <Title as="h1">A page title</Title>
      <Content>Content...</Content>
      <List>
        <ListItem>List Item 1</ListItem>
        <ListItem>List Item 1</ListItem>
      </List>
    </Section>
  </Main>
)