<div class="flex flex-col gap-2"> 
   <p class="text-primary"> This is primary heading 1, you can add using
       <code class="font-black">.text-primary</code></p> 
   <p class="text-secondary"> This is secondary heading 2, you can add using
       <code class="font-black">.text-secondary</code></p>
   <p class="text-info"> This is info heading 3, you can add using
       <code class="font-black">.text-info</code></p> 
   <p class="text-success"> This is success heading 4, you can add using
       <code class="font-black">.text-success</code></p> 
   <p class="text-warning"> This is warning heading 5, you can add using
       <code class="font-black">.text-warning</code></p> 
   <p class="text-danger"> This is danger heading 6, you can add using
       <code class="font-black">.text-danger</code></p>
   <p class="text-light"> This is light heading 6, you can add using
       <code class="font-black">.text-light</code></p>                                   
</div> 

  <div class="flex flex-col gap-2"> 
  <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>
  <p><u>This line of text will render as underlined.</u></p>
  <p><small>This line of text is meant to be treated as fine print.</small></p>
  <p><strong>This line rendered as bold text.</strong></p>
  <p><em>This line rendered as italicized text.</em></p>                              
</div> 

  <div class="flex flex-col gap-2">
  <div>
      <h4 class="text-sm font-semibold text-title text-start"> Alignment Left </h4>
      <p class="text-light text-start"> You can set start alignment of the text using 
          <strong>text-start.</strong></p> 
  </div>
  <div>
      <h4 class="text-sm font-semibold text-title text-center"> Alignment Center </h4>
      <p class="text-center"> You can set start alignment of the text using 
          <strong>text-center.</strong></p>
  </div>
  <div>
      <h4 class="text-sm font-semibold text-title text-end"> Alignment Right </h4>
      <p class="text-end"> You can set start alignment of the text using 
          <strong>text-end.</strong></p> 
  </div>
</div> 

  <div class="flex flex-col gap-2"> 
  <blockquote class="text-start border-l-4 border-primary p-2 bg-[rgba(var(--primary),0.1)]">
      <p class="mb-1">The blockquote tag specifies a section that is quoted from another source.</p>
  <blockquote-footer><cite title="Source Title"><cite></blockquote-footer> 
  </blockquote> 
  <blockquote class="text-end border-l-4 border-primary p-2 bg-[rgba(var(--primary),0.1)]">
      <p class="mb-1">The blockquote tag specifies a section that is quoted from another source.</p>
  <blockquote-footer><cite title="Source Title"><cite></blockquote-footer> 
  </blockquote>                               
</div>