<p><a class="text-primary text-base hover:text-primary opacity-90" href="#">Link opacity 90</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-80" href="#">Link opacity 80</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-70" href="#">Link opacity 70</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-60" href="#">Link opacity 60</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-50" href="#">Link opacity 50</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-40" href="#">Link opacity 40</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-30" href="#">Link opacity 30</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-20" href="#">Link opacity 20</a></p>
<p><a class="text-primary text-base hover:text-primary opacity-10" href="#">Link opacity 10</a></p>
                
                                                        

       
<p><a class="text-primary text-base hover:opacity-90" href="#">Link opacity 90</a></p>
<p><a class="text-primary text-base hover:opacity-80" href="#">Link opacity 80</a></p>
<p><a class="text-primary text-base hover:opacity-70" href="#">Link opacity 70</a></p>
<p><a class="text-primary text-base hover:opacity-60" href="#">Link opacity 60</a></p>
<p><a class="text-primary text-base hover:opacity-50" href="#">Link opacity 50</a></p>
<p><a class="text-primary text-base hover:opacity-40" href="#">Link opacity 40</a></p>
<p><a class="text-primary text-base hover:opacity-30" href="#">Link opacity 30</a></p>
<p><a class="text-primary text-base hover:opacity-20" href="#">Link opacity 20</a></p>
<p><a class="text-primary text-base hover:opacity-10" href="#">Link opacity 10</a></p>
                
                                                        

       
<p><a class="text-gray-800 text-base underline decoration-gray-800 hover:opacity-80 dark:text-white dark:decoration-white" href="#">Dark underline</a></p>
<p><a class="text-gray-500 text-base underline decoration-gray-500 hover:opacity-80" href="#">Secondary underline</a></p>
<p><a class="text-primary text-base underline decoration-primary hover:opacity-80" href="#">Primary underline</a></p>
<p><a class="text-success text-base underline decoration-success hover:opacity-80" href="#">Success underline</a></p>
<p><a class="text-error text-base underline decoration-error hover:opacity-80" href="#">Invalid underline</a></p>
<p><a class="text-warning text-base underline decoration-warning hover:opacity-80" href="#">Yellow underline</a></p>
<p><a class="text-white text-base underline decoration-white hover:opacity-80" href="#">Light underline</a></p>
                
                                                        

       
<p><a class="text-gray-800 text-base underline decoration-gray-800 hover:opacity-80 dark:text-white dark:decoration-white" href="#">Dark underline</a></p>
<p><a class="text-gray-500 text-base underline decoration-gray-500 hover:opacity-80" href="#">Secondary underline</a></p>
<p><a class="text-primary text-base underline decoration-primary hover:opacity-80" href="#">Primary underline</a></p>
<p><a class="text-success text-base underline decoration-success hover:opacity-80" href="#">Success underline</a></p>
<p><a class="text-error text-base underline decoration-error hover:opacity-80" href="#">Invalid underline</a></p>
<p><a class="text-warning text-base underline decoration-warning hover:opacity-80" href="#">Yellow underline</a></p>
<p><a class="text-white text-base underline decoration-white hover:opacity-80" href="#">Light underline</a></p>
                
                                                        

       
<p><a class="text-primary text-base underline underline-offset-1 decoration-primary hover:opacity-80" href="#">Underline offset 1</a></p>
<p><a class="text-primary text-base underline underline-offset-2 decoration-primary hover:opacity-80" href="#">Underline offset 2</a></p>
<p><a class="text-primary text-base underline underline-offset-4 decoration-primary hover:opacity-80" href="#">Underline offset 4</a></p>
<p><a class="text-primary text-base underline underline-offset-8 decoration-primary hover:opacity-80" href="#">Underline offset 8</a></p>
                
                                                        

       
<p><a class="text-primary text-base underline underline-offset-1 decoration-primary hover:opacity-80" href="#">Underline offset 1</a></p>
<p><a class="text-primary text-base underline underline-offset-2 decoration-primary hover:opacity-80" href="#">Underline offset 2</a></p>
<p><a class="text-primary text-base underline underline-offset-4 decoration-primary hover:opacity-80" href="#">Underline offset 4</a></p>
<p><a class="text-primary text-base underline underline-offset-8 decoration-primary hover:opacity-80" href="#">Underline offset 8</a></p>
                
                                                        

       
<button type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-sm font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-plus text-lg leading-tight font-medium"></i>
Link-sm
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-plus text-lg leading-tight font-medium "></i>
Link
</button>
<button type="button" class="py-2.5 px-3 inline-flex items-center gap-x-1 text-sm font-medium rounded-full border border-dashed border-gray-200 bg-white text-gray-800 hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
<i class="ti ti-plus text-lg leading-tight font-medium "></i>
Link-lg
</button>
                
                                                        

       
<a class="inline-flex items-center gap-x-1 text-sm text-gray-800 hover:text-primary dark:text-gray-200 dark:hover:text-primary" href="#">
<i class="ti ti-chevron-left text-base leading-tight font-medium"></i>
<span class="leading-normal">Back to home</span>
</a>
<a class="inline-flex items-center gap-x-1 text-sm text-primary decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
   Learn more
   <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="m9 18 6-6-6-6"/>
   </svg>
</a>