Headings (H1-H6)

Different heading sizes with semantic HTML

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Code

<h1 class="text-4xl font-bold text-gray-900 dark:text-white">Heading 1</h1>
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">Heading 2</h2>
<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">Heading 3</h3>
<h4 class="text-xl font-semibold text-gray-900 dark:text-white">Heading 4</h4>
<h5 class="text-lg font-medium text-gray-900 dark:text-white">Heading 5</h5>
<h6 class="text-base font-medium text-gray-900 dark:text-white">Heading 6</h6>

Paragraphs

Standard paragraph text with proper spacing

This is a standard paragraph with normal text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Code

<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
    This is a standard paragraph with normal text. Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et 
    dolore magna aliqua.
</p>

Lead Text

Larger text for introductions and emphasis

This is lead text, typically used for introductions or to emphasize important content. It draws more attention than regular paragraphs.

Code

<p class="text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
    This is lead text, typically used for introductions or to emphasize important content.
</p>

Muted Text

Secondary text with reduced emphasis

This is muted text for less important information, captions, or helper text.

Code

<p class="text-sm text-gray-500 dark:text-gray-400">
    This is muted text for less important information, captions, or helper text.
</p>

Inline Code

Code snippets within text

Use the npm install command to install packages.

Code

<p class="text-gray-700 dark:text-gray-300">
    Use the <code class="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-red-600 dark:text-red-400 rounded text-sm font-mono">npm install</code> command to install packages.
</p>

Blockquote

Quoted text with citation

"The best way to predict the future is to invent it."

— Alan Kay

Code

<blockquote class="border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 dark:bg-blue-900/20 rounded">
    <p class="text-gray-700 dark:text-gray-300 italic">
        "The best way to predict the future is to invent it."
    </p>
    <footer class="text-sm text-gray-500 dark:text-gray-400 mt-2">— Alan Kay</footer>
</blockquote>

Unordered List

Bullet point lists

First item in the list
Second item in the list
Third item in the list
Fourth item in the list

Code

<ul class="space-y-2 text-gray-700 dark:text-gray-300 list-disc list-inside">
    <li>First item in the list</li>
    <li>Second item in the list</li>
    <li>Third item in the list</li>
    <li>Fourth item in the list</li>
</ul>

Ordered List

Numbered lists

First step in the process
Second step in the process
Third step in the process
Fourth step in the process

Code

<ol class="space-y-2 text-gray-700 dark:text-gray-300 list-decimal list-inside">
    <li>First step in the process</li>
    <li>Second step in the process</li>
    <li>Third step in the process</li>
    <li>Fourth step in the process</li>
</ol>

Description List

Key-value pairs for definitions

Name: John Doe
Email: john@example.com
Role: Administrator

Code

<dl class="space-y-4">
    <div>
        <dt class="text-sm font-semibold text-gray-900 dark:text-white">Name</dt>
        <dd class="text-sm text-gray-600 dark:text-gray-400">John Doe</dd>
    </div>
    <div>
        <dt class="text-sm font-semibold text-gray-900 dark:text-white">Email</dt>
        <dd class="text-sm text-gray-600 dark:text-gray-400">john@example.com</dd>
    </div>
    <div>
        <dt class="text-sm font-semibold text-gray-900 dark:text-white">Role</dt>
        <dd class="text-sm text-gray-600 dark:text-gray-400">Administrator</dd>
    </div>
</dl>

Text Truncation with Tooltip

Truncated text with hover tooltip

This is a very long text that will be truncated with ellipsis when it overflows the container

Code

<p class="max-w-xs truncate text-gray-700 dark:text-gray-300" 
   title="This is a very long text that will be truncated with ellipsis when it overflows the container">
    This is a very long text that will be truncated with ellipsis when it overflows the container
</p>

Text Highlight / Mark

Highlighted text for emphasis

This text has a highlighted portion in the middle.

Code

<p class="text-gray-700 dark:text-gray-300">
    This text has a <mark class="bg-yellow-200 dark:bg-yellow-700 px-1 rounded">highlighted portion</mark> in the middle.
</p>

Keyboard Shortcut (KBD)

Display keyboard shortcuts

Press Ctrl + K to open command palette

Code

<p class="text-gray-700 dark:text-gray-300">
    Press <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded shadow-sm">Ctrl</kbd> 
    + <kbd class="px-2 py-1.5 text-xs font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded shadow-sm">K</kbd> 
    to open command palette
</p>