Typography

Heading

Style with HTML tags

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Style with CSS classes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<p class="text-h1">Heading 1</p>
<p class="text-h2">Heading 2</p>
<p class="text-h3">Heading 3</p>
<p class="text-h4">Heading 4</p>
<p class="text-h5">Heading 5</p>
<p class="text-h6">Heading 6</p>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

Inline text elements

This line rendered as bold text.

This line rendered as italicized text.

This line rendered as underlined text.

<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<p><u>This line rendered as underlined text.</u></p>

Link

Link

<p>
  <a
    href="#"
    class="font-medium text-primary-400 hover:underline"
  >
    Link
  </a>
</p>

List

Unordered list

• List item 1
• List item 2
• List item 3

<ul class="list-disc list-inside">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Ordered list

1. List item 1
2. List item 2
3. List item 3

<ol class="list-decimal list-inside">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

Blockquote

A well-known quote, contained in a blockquote element.

Someone famous

Source Title

<blockquote class="p-4 my-4 border-s-4 border-gray-600 dark:text-gray-300 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
  <p class="text-xl italic font-medium leading-relaxed text-gray-900 dark:text-white-500">
    A well-known quote, contained in a blockquote element.
  </p>

  <figcaption class="flex items-center mt-6 space-x-3 rtl:space-x-reverse">
    <div class="flex items-center divide-x rtl:divide-x-reverse divide-gray-300 dark:divide-gray-700">
      <cite class="pe-3 font-medium text-gray-600 dark:text-gray-300">
        Someone famous
      </cite>

      <cite class="ps-3 text-sm text-gray-500 dark:text-gray-400">
        Source Title
      </cite>
    </div>
  </figcaption>
</blockquote>