Headings
h1
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
Heading 1
</h1>
h2
<h2 class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
Heading 2
</h2>
h3
<h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
Heading 3
</h3>
h4
<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
Heading 4
</h4>
Paragraph
<p class="leading-7 [&:not(:first-child)]:mt-6">
This is a paragraph of text with proper spacing and line height.
</p>
Blockquote
<blockquote class="mt-6 border-l-2 pl-6 italic">
"This is a blockquote with border and italic styling."
</blockquote>
Table
<div class="my-6 w-full overflow-y-auto">
<table class="w-full">
<thead>
<tr class="m-0 border-t p-0 even:bg-muted">
<th class="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
Header
</th>
</tr>
</thead>
<tbody>
<tr class="m-0 border-t p-0 even:bg-muted">
<td class="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
Cell
</td>
</tr>
</tbody>
</table>
</div>
List
<ul class="my-6 ml-6 list-disc [&>li]:mt-2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Inline Code
<code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
inline code
</code>
Lead
<p class="text-xl text-muted-foreground">
A larger paragraph for lead text.
</p>
Large
<div class="text-lg font-semibold">
Large text
</div>
Small
<small class="text-sm font-medium leading-none">
Small text
</small>
Muted
<p class="text-sm text-muted-foreground">
Muted paragraph text
</p>