Dashpro | Tailwind Css 4 Admin Template

Heading

H1

H2

H3

H4

H5

H6

                      
<h1 class="text-4xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100">H1</h1>
<h2 class="text-3xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100">H2</h2>
<h3 class="text-2xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100">H3</h3>
<h4 class="text-xl leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100">H4</h4>
<h5 class="text-lg leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100">H5</h5>
<h6 class="text-base leading-normal mb-2 font-bold text-gray-800 dark:text-gray-100">H6</h6>

Display

Display 1

Display 2

Display 3

Display 4

                      
<h2 class="text-8xl mb-6 font-normal text-gray-800 dark:text-gray-100">Display 1</h2>
<h2 class="text-7xl mb-6 font-normal text-gray-800 dark:text-gray-100">Display 2</h2>
<h2 class="text-6xl mb-6 font-normal text-gray-800 dark:text-gray-100">Display 3</h2>
<h2 class="text-5xl mb-6 font-normal text-gray-800 dark:text-gray-100">Display 4</h2>

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

                    
<p class="text-gray-500 leading-relaxed font-light text-xl mx-auto pb-2">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

Link

Click this link
External link

                    
<a href="#" class="text-purple-500 hover:underline">Click this link</a>
<a href="#" target="_blank" rel="noopener" class="text-purple-500 hover:underline">External link</a>

Text Muted

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor

                    
<p class="text-gray-500">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor</p>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote by Ari Budin

                      
                        <blockquote class="relative p-4 border-s-4 border-purple-700 bg-gray-100 dark:bg-gray-700 mb-4 text-xl">
                          <span class="absolute opacity-80 size-8">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270.000000 270.000000"><g transform="translate(0.000000,270.000000) scale(0.100000,-0.100000)" class="fill-purple-500" stroke="none"><path d="M920 2182 c-290 -124 -482 -341 -540 -610 -30 -140 -40 -296 -40 -644 l0 -328 370 0 370 0 0 370 0 370 -181 0 -181 0 7 63 c26 243 129 387 342 477 35 15 66 29 69 32 7 7 -132 298 -143 298 -4 0 -37 -13 -73 -28z"></path><path d="M2179 2186 c-249 -103 -442 -295 -520 -516 -50 -142 -61 -247 -66 -677 l-5 -393 371 0 371 0 0 370 0 370 -181 0 -181 0 7 53 c21 170 67 281 150 363 51 49 143 107 215 134 19 7 39 17 44 21 10 9 -124 298 -139 298 -5 0 -35 -10 -66 -23z"></path></g></svg>
                          </span>
                          <p class="ms-16 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                          <footer class="ms-16 text-base">Quote by <cite title="Source Title">Ari Budin</cite></footer>
                        </blockquote>

Dropcaps

Aenean sodales lacus est, at ultricies augue ele ifend sit amet. Be yourself everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes. Be yourself everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes. Vivamus aliquet sit amet nisi non faucibus. Orci varius natoque penatibus et magnis dis parturient montes.

                    
                      <p><span class="block ltr:float-start rtl:float-end text-6xl me-3 mb-3 text-center">A</span>enean sodales lacus est, at ultricies augue ele ifend sit amet. <ins>Be yourself</ins> everyone else is already taken, sem mi placerat felis, ac suscip ligula ex id metus.</p>

Text inline

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

                    
                      <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                      <p><del>This line of text is meant to be treated as deleted text.</del></p>
                      <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

List UL OL

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
- Itaque earum rerum hic tenetur a sapiente delectus
- which of us ever undertakes laborious physical exercise
Et harum quidem rerum facilis est et expedita distinctio
Itaque earum rerum hic tenetur a sapiente delectus
which of us ever undertakes laborious physical exercise

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
1. Itaque earum rerum hic tenetur a sapiente delectus
2. which of us ever undertakes laborious physical exercise
Et harum quidem rerum facilis est et expedita distinctio
Itaque earum rerum hic tenetur a sapiente delectus
which of us ever undertakes laborious physical exercise

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
1. Itaque earum rerum hic tenetur a sapiente delectus
2. which of us ever undertakes laborious physical exercise
Et harum quidem rerum facilis est et expedita distinctio
Itaque earum rerum hic tenetur a sapiente delectus
which of us ever undertakes laborious physical exercise

                      
<ul class="list-disc list-inside ps-8 my-2">
  <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    <ul class="list-disc list-inside ps-8 my-2">
      <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
      <li>which of us ever undertakes laborious physical exercise</li>
    </ul>
  </li>
  <li>Et harum quidem rerum facilis est et expedita distinctio</li>
  <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
  <li>which of us ever undertakes laborious physical exercise</li>
</ul>

<ol class="list-decimal list-inside ps-8 my-2">
  <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    <ol class="list-decimal list-inside ps-8 my-2">
      <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
      <li>which of us ever undertakes laborious physical exercise</li>
    </ol>
  </li>
  <li>Et harum quidem rerum facilis est et expedita distinctio</li>
  <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
  <li>which of us ever undertakes laborious physical exercise</li>
</ol>

<ul class="list-disc list-inside ps-8 my-2">
  <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
    <ol class="list-decimal list-inside ps-8 my-2">
      <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
      <li>which of us ever undertakes laborious physical exercise</li>
    </ol>
  </li>
  <li>Et harum quidem rerum facilis est et expedita distinctio</li>
  <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
  <li>which of us ever undertakes laborious physical exercise</li>
</ul>

Typography