Typography Example

<!doctype html>
<title>Tailwind CSS Typography Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 p-8">

<div class="max-w-4xl mx-auto p-10 bg-white rounded-2xl shadow-xl space-y-10">
    
    
    <div>
      <h3 class="text-3xl font-extrabold text-slate-900 tracking-tight mb-2">Primary Heading</h3>
      <p class="text-xl text-slate-500 font-medium">This is a sub-heading with font-medium.</p>
    </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div class="text-left space-y-2">
        <p class="text-sm font-bold uppercase tracking-widest text-indigo-600">Left Aligned</p>
        <p class="text-slate-600 leading-relaxed">
          The quick brown fox jumps over the lazy dog. This text is small, bold, and has extra letter spacing.
        </p>
      </div>
      <div class="text-right space-y-2">
        <p class="text-sm font-bold uppercase tracking-widest text-rose-600">Right Aligned</p>
        <p class="text-slate-600 leading-relaxed italic line-through">
          The quick brown fox jumps over the lazy dog. This text is italicized and has a strikethrough.
        </p>
      </div>
    </div>

<div class="p-6 bg-slate-50 rounded-lg border border-slate-200">
      <p class="leading-loose tracking-tighter text-slate-700">
        This paragraph uses <code>leading-loose</code> for wide line height and <code>tracking-tighter</code> for squashed characters. Tailwind's typography system makes it easy to fine-tune every detail of your text presentation.
      </p>
    </div>

</div>

</body>