Paragraph

<Paragraph>Hello world</Paragraph>

// These are equivalent
<Paragraph>Hello world</Paragraph>
<Paragraph><Text>Hello world</Text></Paragraph>

<Paragraph>
  This is <Text className="font-bold">bold</Text> and this is
  <Text className="italic"> italic</Text>.
</Paragraph>

<Paragraph>
  This is <Bold>bold</Bold> and this is <Italic>italic</Italic>.
</Paragraph>

<Paragraph className="text-left">Left aligned</Paragraph>
<Paragraph className="text-center">Centered</Paragraph>
<Paragraph className="text-right">Right aligned</Paragraph>
<Paragraph className="text-justify">Justified text</Paragraph>

<Paragraph className="mt-4">Margin top</Paragraph>
<Paragraph className="mb-4">Margin bottom</Paragraph>
<Paragraph className="mt-8 mb-4">Both</Paragraph>

<Paragraph className="indent-8">First line indent</Paragraph>
<Paragraph className="ml-8">Left indent (whole paragraph)</Paragraph>
<Paragraph className="mr-8">Right indent</Paragraph>

<Paragraph className="leading-tight">Tight line spacing</Paragraph>
<Paragraph className="leading-normal">Normal spacing</Paragraph>
<Paragraph className="leading-loose">Loose spacing</Paragraph>

<Paragraph className="bg-yellow-100">Highlighted paragraph</Paragraph>

<Paragraph>
  First line
  <BreakLine />
  Second line (same paragraph)
</Paragraph>

<Paragraph>
  Name:<Tab />John Doe
</Paragraph>

<Paragraph>Content before</Paragraph>
<BreakPage />
<Paragraph>Content on new page</Paragraph>

<Paragraph>
  Visit <Link href="https://example.com">our website</Link> for more info.
</Paragraph>

<Paragraph id="section-1">
  <H1>Introduction</H1>
</Paragraph>

{/* Later in the document */}
<Paragraph>
  See <Link href="#section-1">Introduction</Link>.
</Paragraph>