h1. Preline heading

   
<p class="text-dark text-base dark:text-white">You can use the mark tag to <mark>highlight</mark> text.</p>
<p class="text-dark text-base dark:text-white"><del>This line of text is meant to be treated as deleted text.</del></p>
<p class="text-dark text-base dark:text-white"><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p class="text-dark text-base dark:text-white"><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p class="text-dark text-base dark:text-white"><u>This line of text will render as underlined.</u></p>
<p class="text-dark text-base dark:text-white"><small>This line of text is meant to be treated as fine print.</small></p>
<p class="text-dark text-base dark:text-white"><strong>This line rendered as bold text.</strong></p>
<p class="text-dark text-base dark:text-white"><em>This line rendered as italicized text.</em></p>
            
                                                    

   
<blockquote class="relative">
   <i class="ti ti-quote absolute -top-7 start-3.5 size-16 text-gray-200 dark:text-gray-700 rotate-180 text-[40px] leading-tight font-medium origin-left"></i>
   <div class="relative z-10">
      <p class="text-gray-800 dark:text-white text-base"><em>
         I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.
         </em>
      </p>
   </div>
</blockquote>
            
                                                    

   
<blockquote class="relative text-center max-w-lg mx-autos">
   <i class="ti ti-quote absolute -top-7 start-8 size-16 text-gray-200 dark:text-gray-700 rotate-180 text-[40px] leading-tight font-medium origin-left"></i>
   <div class="relative z-10">
      <p class="text-gray-800 dark:text-white text-base"><em>
         I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.
         </em>
      </p>
   </div>
</blockquote>
            
                                                    

   
<blockquote class="relative text-end max-w-lg mx-autos">
   <i class="ti ti-quote absolute -top-7 start-12 size-16 text-gray-200 dark:text-gray-700 rotate-180 text-[40px] leading-tight font-medium origin-left"></i>
   <div class="relative z-10">
      <p class="text-gray-800 dark:text-white text-base"><em>
         I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.
         </em>
      </p>
   </div>
</blockquote>
            
                                                    

   
<blockquote class="relative border-s-4 ps-4 sm:ps-6 dark:border-gray-700">
   <p class="text-gray-800 sm:text-lg dark:text-white"><em>
      I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed.
      </em>
   </p>
   <footer class="mt-4">
      <div class="flex items-center">
         <div class="flex-shrink-0">
            <img class="size-10 rounded-full" src="../assets/images/profile/user-1.jpg" alt="Image Description">
         </div>
         <div class="ms-4">
            <div class="text-base font-semibold text-gray-800 dark:text-gray-400">Josh Grazioso</div>
            <div class="text-xs text-gray-500">Source title</div>
         </div>
      </div>
   </footer>
</blockquote>
            
                                                    

   
<ol class="list-decimal list-inside text-gray-800 dark:text-white text-sm">
   <li>Lorem ipsum dolor sit . </li>
   <li>amet consectetur, adipisicing elit</li>
   <li>Ullam aliquam sint quasi.</li>
</ol>
            
                                                    

   
<ul class="list-disc list-inside text-gray-800 dark:text-white text-sm">
   <li>Lorem ipsum dolor sit . </li>
   <li>amet consectetur, adipisicing elit</li>
   <li>Ullam aliquam sint quasi.</li>
</ul>
            
                                                    

   
<dl class="grid sm:grid-cols-3 gap-1 sm:gap-3">
   <dt class="sm:col-span-1 font-semibold dark:text-white">Description lists</dt>
   <dd class="sm:col-span-2 mb-3 sm:mb-0 dark:text-white">A description list is perfect for defining terms.</dd>
   <dt class="sm:col-span-1 font-semibold dark:text-white">Term</dt>
   <dd class="sm:col-span-2 mb-3 sm:mb-0 dark:text-white">
      <p>Definition for the term.</p>
      <p>And some more placeholder definition text.</p>
   </dd>
   <dt class="sm:col-span-1 font-semibold dark:text-white">Another term</dt>
   <dd class="sm:col-span-2 mb-3 sm:mb-0 dark:text-white">This definition is short, so no extra paragraphs or anything.</dd>
   <dt class="sm:col-span-1 font-semibold truncate dark:text-white">Truncated term is truncated</dt>
   <dd class="sm:col-span-2 mb-3 sm:mb-0 dark:text-white">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
   <dt class="sm:col-span-1 font-semibold dark:text-white">Nesting</dt>
   <dd class="sm:col-span-2 mb-3 sm:mb-0 dark:text-white">
      <dl class="grid sm:grid-cols-5 gap-1 sm:gap-3 dark:text-white">
         <dt class="sm:col-span-2 font-semibold dark:text-white">Nested definition list</dt>
         <dd class="sm:col-span-3 mb-3 sm:mb-0 dark:text-white">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
      </dl>
   </dd>
</dl>
            
                                                    

   
<p class="first-line:uppercase first-line:tracking-widest
   first-letter:text-7xl first-letter:font-bold first-letter:text-slate-900
   first-letter:mr-3 first-letter:float-left text-base
   ">
   Well, let me tell you something, funny boy. Y'know that little stamp, the one
   that says "New York Public Library"? Well that may not mean anything to you,
   but that means a lot to me. One whole hell of a lot.
</p>
<p class="text-base mt-4">Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.</p>
            
                                                    

   
<div class="max-w-lg mx-auto p-8">
   <details class="open:bg-white dark:open:bg-transparent open:ring-1 open:ring-black/5 dark:open:ring-white/10 open:shadow-lg p-6 rounded-md" open>
      <summary class="text-sm leading-6 text-slate-900 dark:text-white font-semibold select-none">
         Why do they call it Ovaltine?
      </summary>
      <div class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
         <p>The mug is round. The jar is round. They should call it Roundtine.</p>
      </div>
   </details>
</div>