Tailwind Typography

        
            
    <p class="text-xs text-dark-800">Tailwind Elements</p>
    <p class="text-sm text-dark-800">Tailwind Elements</p>
    <p class="text-base text-dark-800">Tailwind Elements</p>
    <p class="text-lg text-dark-800">Tailwind Elements</p>
    <p class="text-xl text-dark-800">Tailwind Elements</p>
    <p class="text-2xl text-dark-800">Tailwind Elements</p>
    <p class="text-3xl text-dark-800">Tailwind Elements</p>
    <p class="text-4xl text-dark-800">Tailwind Elements</p>
    <p class="text-5xl text-dark-800">Tailwind Elements</p>
    <p class="text-6xl text-dark-800">Tailwind Elements</p>
    <p class="text-7xl text-dark-800">Tailwind Elements</p>
    <p class="text-8xl text-dark-800">Tailwind Elements</p>
    <p class="text-9xl text-dark-800">Tailwind Elements</p>

    
        
    

        
            
    <p class="font-thin text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-extralight text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-light text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-normal text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-medium text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-semibold text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-bold text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-extrabold text-dark-800 text-2xl">Tailwind Elements</p>
    <p class="font-black text-dark-800 text-2xl">Tailwind Elements</p>

    
        
    

        
            
    <p class="text-blue-600 mb-2">.leading-none</p>
    <p class="leading-none text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-tight</p>
    <p class="leading-tight text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-snug</p>
    <p class="leading-snug text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-normal</p>
    <p class="leading-normal text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-relaxed</p>
    <p class="leading-relaxed text-gray-800 mb-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>
    <p class="text-blue-600 mb-2">.leading-loose</p>
    <p class="leading-loose text-gray-800">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto ea quasi eius, molestiae assumenda perspiciatis iste odio saepe et unde voluptatum quisquam maiores aperiam odit reprehenderit quibusdam rerum alias itaque.</p>

    
        
    

        
            
    <p class="text-blue-600 mb-2">.list-disc</p>
    <ul class="list-disc text-gray-800 mb-6 pl-4">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>
    
    <p class="text-blue-600 mb-2">.list-decimal</p>
    <ol class="list-decimal text-gray-800 mb-6 pl-4">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ol>
    
    <p class="text-blue-600 mb-2">list default</p>
    <ul class="text-gray-800">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>

    
        
    

        
            
    <p class="text-blue-600 mb-2">.list-inside</p>
    <ul class="list-disc list-inside text-purple-800 mb-6 bg-purple-200 rounded-lg">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>
  
    <p class="text-blue-600 mb-2">.list-outside</p>
    <ul class="list-disc list-outside text-purple-800 bg-purple-200 rounded-lg">
      <li>Sleep</li>
      <li>Exercise</li>
      <li>Nutrition</li>
    </ul>
    
    
        
    

        
            
    <p class="text-blue-600 mb-2">.underline</p>
    <p class="underline text-gray-800 mb-6">Send me a copy of this message</p>

    <p class="text-blue-600 mb-2">.line-through</p>
    <p class="line-through text-gray-800">Send me a copy of this message</p>