Font Size

<p class="text-xs">Extra small text (0.75rem).</p>
<p class="text-sm">Small text (0.875rem).</p>
<p class="text-base">Base text (1rem).</p>
<p class="text-lg">Large text (1.125rem).</p>
<p class="text-xl">Extra large text (1.25rem).</p>
<p class="text-2xl">2xl text (1.5rem).</p>
<p class="text-3xl">3xl text (1.875rem).</p>
<p class="text-4xl">4xl text (2.25rem).</p>
<p class="text-5xl">5xl text (3rem).</p>

<!-- Typography hierarchy example -->
<article class="max-w-2xl mx-auto p-4">
  <h1 class="text-4xl font-bold mb-4">Main Heading (text-4xl)</h1>
  <h2 class="text-2xl font-semibold mb-3">Subheading (text-2xl)</h2>
  <p class="text-base mb-4">This is regular body text (text-base) that forms the main content of the article. It should be easily readable with an optimal line length.</p>
  <blockquote class="border-l-4 border-gray-300 pl-4 italic text-lg mb-4">
    This is a blockquote that stands out with slightly larger text (text-lg).  
  </blockquote>
  <p class="text-base mb-4">Back to the regular body text size. Typography is about creating a clear visual hierarchy to guide readers through your content.</p>
  <h3 class="text-xl font-semibold mb-2">Section Title (text-xl)</h3>
  <p class="text-base mb-6">More body text at the regular size. Consistent use of text sizes helps create a rhythm throughout your content.</p>
  <div class="bg-gray-100 p-4 rounded-lg">
    <h4 class="text-lg font-medium mb-2">Note (text-lg)</h4>
    <p class="text-sm">This is smaller text (text-sm) for less important information or secondary content.</p>
  </div>
</article>

<!-- Responsive typography -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold tracking-tight mb-4">
  Responsive heading that scales with screen size
</h1>
<p class="text-sm sm:text-base md:text-lg max-w-prose mb-8">
  This paragraph also changes size based on the screen width, ensuring readability on all devices while maintaining proportions with the heading.
</p>
<div class="flex space-x-4">
  <button class="bg-blue-600 text-white px-4 py-2 rounded text-xs sm:text-sm md:text-base">
    Primary Button
  </button>
  <button class="border border-blue-600 text-blue-600 px-4 py-2 rounded text-xs sm:text-sm md:text-base">
    Secondary Button
  </button>
</div>

<!-- Modern pricing card with varied text sizes -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
  <div class="bg-blue-600 p-6 text-white text-center">
    <h3 class="text-lg font-semibold uppercase tracking-wide">Pro Plan</h3>
    <div class="mt-2">
      <span class="text-5xl font-bold">$49</span>
      <span class="text-sm">/month</span>
    </div>
  </div>
  <div class="p-6">
    <ul class="space-y-3">
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <span>10 users included</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <span>2 GB of storage</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
        <span>Priority email support</span>
      </li>
    </ul>
    <button class="mt-6 w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold">
      Start your trial
    </button>
    <p class="mt-4 text-xs text-center text-gray-500">
      Cancel anytime. No credit card required for trial.
    </p>
  </div>
</div>