<!-- Sans-serif (default) - Clean, modern -->
<p class="font-sans">
  This uses a sans-serif font (system fonts like -apple-system, Segoe UI, etc.)
</p>

<!-- Serif - Traditional, elegant -->
<p class="font-serif">
  This uses a serif font (Georgia, Times New Roman, etc.)
</p>

<!-- Monospace - Code, technical -->
<p class="font-mono">
  This uses a monospace font (Courier, Consolas, Monaco, etc.)
</p>

@import "tailwindcss";

/* Import a Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Now font-sans will use Inter */

<!-- Will now use Inter font -->
<p class="font-sans">This uses the Inter font</p>

<!-- Extra small - 12px -->
<p class="text-xs">Extra small text</p>

<!-- Small - 14px -->
<p class="text-sm">Small text</p>

<!-- Base/default - 16px -->
<p class="text-base">Base text (default)</p>

<!-- Large - 18px -->
<p class="text-lg">Large text</p>

<!-- Extra large - 20px -->
<p class="text-xl">Extra large text</p>

<!-- 2X large - 24px -->
<p class="text-2xl">2X large text</p>

<!-- 3X large - 30px -->
<p class="text-3xl">3X large text</p>

<!-- 4X large - 36px -->
<p class="text-4xl">4X large text</p>

<!-- 5X large - 48px -->
<p class="text-5xl">5X large text</p>

<!-- 6X large - 60px -->
<p class="text-6xl">6X large text</p>

<!-- 7X large - 72px -->
<p class="text-7xl">7X large text</p>

<!-- 8X large - 96px -->
<p class="text-8xl">8X large text</p>

<!-- 9X large - 128px -->
<p class="text-9xl">9X large text</p>

<!-- Scale up on larger screens -->
<h1 class="text-2xl md:text-4xl lg:text-5xl xl:text-6xl">
  Responsive Heading
</h1>

<!-- Mobile: 24px, Tablet: 36px, Desktop: 48px, XL: 60px -->

<p class="text-sm md:text-base lg:text-lg">
  Responsive paragraph text
</p>

<!-- Thin - 100 -->
<p class="font-thin">Thin text (100)</p>

<!-- Extra light - 200 -->
<p class="font-extralight">Extra light text (200)</p>

<!-- Light - 300 -->
<p class="font-light">Light text (300)</p>

<!-- Normal - 400 (default) -->
<p class="font-normal">Normal text (400)</p>

<!-- Medium - 500 -->
<p class="font-medium">Medium text (500)</p>

<!-- Semibold - 600 -->
<p class="font-semibold">Semibold text (600)</p>

<!-- Bold - 700 -->
<p class="font-bold">Bold text (700)</p>

<!-- Extra bold - 800 -->
<p class="font-extrabold">Extra bold text (800)</p>

<!-- Black - 900 -->
<p class="font-black">Black text (900)</p>

<!-- Large, bold heading -->
<h1 class="text-4xl font-bold">
  Main Heading
</h1>

<!-- Medium heading, semibold -->
<h2 class="text-2xl font-semibold">
  Subheading
</h2>

<!-- Small, light caption -->
<p class="text-sm font-light text-gray-600">
  Image caption or metadata
</p>

<!-- Button text: medium weight, uppercase -->
<button class="text-sm font-medium uppercase">
  Click Me
</button>

<!-- Tight - 1.25 -->
<p class="leading-tight">
  This text has tight line spacing. Good for headings where you want
  lines close together.
</p>

<!-- Snug - 1.375 -->
<p class="leading-snug">
  This text has snug line spacing. Slightly more room than tight.
</p>

<!-- Normal - 1.5 (default) -->
<p class="leading-normal">
  This text has normal line spacing. This is the default and works
  well for most body text.
</p>

<!-- Relaxed - 1.625 -->
<p class="leading-relaxed">
  This text has relaxed line spacing. Great for longer paragraphs
  and improving readability.
</p>

<!-- Loose - 2 -->
<p class="leading-loose">
  This text has loose line spacing. Maximum breathing room between
  lines for very readable, open text.
</p>

<!-- Specific line heights -->
<p class="leading-3">line-height: 0.75rem (12px)</p>
<p class="leading-4">line-height: 1rem (16px)</p>
<p class="leading-5">line-height: 1.25rem (20px)</p>
<p class="leading-6">line-height: 1.5rem (24px)</p>
<p class="leading-7">line-height: 1.75rem (28px)</p>
<p class="leading-8">line-height: 2rem (32px)</p>
<p class="leading-9">line-height: 2.25rem (36px)</p>
<p class="leading-10">line-height: 2.5rem (40px)</p>

<!-- No line height -->
<p class="leading-none">line-height: 1</p>

<!-- Tighter - -0.05em -->
<p class="tracking-tighter">
  Tighter letter spacing
</p>

<!-- Tight - -0.025em -->
<p class="tracking-tight">
  Tight letter spacing
</p>

<!-- Normal - 0em (default) -->
<p class="tracking-normal">
  Normal letter spacing
</p>

<!-- Wide - 0.025em -->
<p class="tracking-wide">
  Wide letter spacing
</p>

<!-- Wider - 0.05em -->
<p class="tracking-wider">
  Wider letter spacing
</p>

<!-- Widest - 0.1em -->
<p class="tracking-widest">
  Widest letter spacing
</p>

<!-- Uppercase text with wide tracking -->
<p class="uppercase tracking-wide text-sm font-semibold text-gray-600">
  Category Label
</p>

<!-- Tight tracking for large headings -->
<h1 class="text-6xl font-bold tracking-tight">
  Big Heading
</h1>

<!-- Wider tracking for buttons -->
<button class="uppercase tracking-wider text-sm font-medium">
  Submit
</button>

<!-- Left aligned (default) -->
<p class="text-left">
  This text is aligned to the left side of its container.
</p>

<!-- Center aligned -->
<p class="text-center">
  This text is centered within its container.
</p>

<!-- Right aligned -->
<p class="text-right">
  This text is aligned to the right side of its container.
</p>

<!-- Justified -->
<p class="text-justify">
  This text is justified, which means it stretches to fill the full width
  of the container by adjusting spacing between words.
</p>

<!-- Start (respects text direction) -->
<p class="text-start">
  Aligned to the start (left in LTR, right in RTL languages)
</p>

<!-- End (respects text direction) -->
<p class="text-end">
  Aligned to the end (right in LTR, left in RTL languages)
</p>

<!-- Center on mobile, left on desktop -->
<p class="text-center md:text-left">
  Responsive text alignment
</p>

<!-- Center headings on mobile -->
<h1 class="text-center lg:text-left text-4xl font-bold">
  Responsive Heading
</h1>

<!-- Underline -->
<p class="underline">This text is underlined</p>

<!-- Overline -->
<p class="overline">This text has a line above it</p>

<!-- Line through -->
<p class="line-through">This text is crossed out</p>

<!-- No decoration (remove inherited decoration) -->
<a href="#" class="no-underline">
  Link without underline
</a>

<!-- Underline on hover -->
<a href="#" class="no-underline hover:underline">
  Link with underline on hover
</a>

<!-- Solid line (default) -->
<p class="underline decoration-solid">Solid underline</p>

<!-- Double line -->
<p class="underline decoration-double">Double underline</p>

<!-- Dotted line -->
<p class="underline decoration-dotted">Dotted underline</p>

<!-- Dashed line -->
<p class="underline decoration-dashed">Dashed underline</p>

<!-- Wavy line -->
<p class="underline decoration-wavy">Wavy underline</p>

<!-- Colored decoration -->
<p class="underline decoration-blue-500">
  Blue underline
</p>

<!-- Thick decoration -->
<p class="underline decoration-4">
  Thick underline (4px)
</p>

<!-- Thin decoration -->
<p class="underline decoration-1">
  Thin underline (1px)
</p>

<!-- Combination -->
<p class="underline decoration-2 decoration-purple-600 decoration-wavy">
  Purple wavy underline
</p>

<!-- Uppercase -->
<p class="uppercase">this text becomes uppercase</p>

<!-- Lowercase -->
<p class="lowercase">THIS TEXT BECOMES LOWERCASE</p>

<!-- Capitalize (first letter of each word) -->
<p class="capitalize">this text is capitalized</p>

<!-- Normal case (remove transformation) -->
<p class="normal-case">Text remains as written</p>

<!-- Button text -->
<button class="uppercase tracking-wider text-sm font-semibold">
  Submit Form
</button>

<!-- Category labels -->
<span class="uppercase text-xs font-medium text-gray-600 tracking-wide">
  Technology
</span>

<!-- Titles -->
<h2 class="capitalize text-2xl font-bold">
  article title here
</h2>

<!-- Truncate with ellipsis (single line) -->
<p class="truncate w-64">
  This is a very long text that will be truncated with an ellipsis when it exceeds the container width...
</p>

<!-- Clip text (no ellipsis) -->
<p class="text-clip overflow-hidden w-64">
  This text will be clipped without ellipsis
</p>

<!-- Show ellipsis -->
<p class="text-ellipsis overflow-hidden w-64">
  This text will show ellipsis when truncated
</p>

<!-- Truncate after 2 lines -->
<p class="line-clamp-2">
  This is a longer paragraph that will be truncated after two lines.
  Any content beyond the second line will be hidden and replaced with
  an ellipsis. This is perfect for card descriptions or preview text.
</p>

<!-- Truncate after 3 lines -->
<p class="line-clamp-3">
  Three lines of text maximum before truncation...
</p>

<!-- Truncate after 4 lines -->
<p class="line-clamp-4">
  Four lines maximum...
</p>

<!-- Remove line clamp -->
<p class="line-clamp-none">
  Show all text without truncation
</p>

<!-- Indent first line -->
<p class="indent-4">
  The first line of this paragraph is indented by 1rem (16px).
  This is common in traditional print-style layouts.
</p>

<p class="indent-8">
  Larger indent (2rem / 32px) for the first line.
</p>

<!-- Align with baseline -->
<p>
  Text with <span class="align-baseline">baseline alignment</span>
</p>

<!-- Align to top -->
<p>
  Text with <span class="align-top">top alignment</span>
</p>

<!-- Align to middle -->
<p>
  Text with <span class="align-middle">middle alignment</span>
</p>

<!-- Align to bottom -->
<p>
  Text with <span class="align-bottom">bottom alignment</span>
</p>

<!-- Superscript and subscript -->
<p>
  Text with <span class="align-super">superscript</span> alignment
</p>
<p>
  Text with <span class="align-sub">subscript</span> alignment
</p>

<article class="max-w-4xl mx-auto px-4 py-12">
  <!-- Category -->
  <span class="uppercase text-xs font-semibold text-blue-600 tracking-wider">
    Technology
  </span>
  
  <!-- Main heading -->
  <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mt-2 mb-4">
    The Future of Web Development
  </h1>
  
  <!-- Subheading -->
  <p class="text-xl md:text-2xl text-gray-600 leading-relaxed mb-6">
    Exploring the latest trends and technologies shaping the modern web
  </p>
  
  <!-- Metadata -->
  <div class="flex items-center gap-4 text-sm text-gray-500">
    <span class="font-medium">By John Doe</span>
    <span>•</span>
    <time>January 3, 2026</time>
    <span>•</span>
    <span>5 min read</span>
  </div>
</article>

<div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden">
  <img src="image.jpg" alt="Card" class="w-full h-48 object-cover">
  
  <div class="p-6">
    <!-- Tag -->
    <span class="inline-block px-3 py-1 bg-purple-100 text-purple-800 text-xs font-semibold uppercase tracking-wide rounded-full mb-3">
      Featured
    </span>
    
    <!-- Title -->
    <h3 class="text-2xl font-bold mb-2 leading-tight">
      Card Title Goes Here
    </h3>
    
    <!-- Description with line clamp -->
    <p class="text-gray-600 leading-relaxed mb-4 line-clamp-3">
      This is a description that will be truncated after three lines.
      It provides enough preview to entice the reader while maintaining
      a clean, consistent card height across the grid.
    </p>
    
    <!-- Author info -->
    <div class="flex items-center">
      <img src="avatar.jpg" alt="Author" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="text-sm font-semibold">Jane Smith</p>
        <p class="text-xs text-gray-500">2 days ago</p>
      </div>
    </div>
  </div>
</div>

<div class="bg-white rounded-lg shadow-xl p-8 max-w-sm">
  <!-- Plan name -->
  <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">
    Pro Plan
  </h3>
  
  <!-- Price -->
  <div class="mb-6">
    <span class="text-5xl font-bold">$29</span>
    <span class="text-gray-500 font-medium">/month</span>
  </div>
  
  <!-- Description -->
  <p class="text-gray-600 mb-6 leading-relaxed">
    Perfect for professionals and small teams
  </p>
  
  <!-- Features list -->
  <ul class="space-y-3 mb-8">
    <li class="flex items-start">
      <span class="text-green-500 mr-2">✓</span>
      <span class="text-sm">Unlimited projects</span>
    </li>
    <li class="flex items-start">
      <span class="text-green-500 mr-2">✓</span>
      <span class="text-sm">Priority support</span>
    </li>
    <li class="flex items-start">
      <span class="text-green-500 mr-2">✓</span>
      <span class="text-sm">Advanced analytics</span>
    </li>
  </ul>
  
  <!-- CTA button -->
  <button class="w-full bg-blue-600 text-white font-semibold py-3 rounded-lg hover:bg-blue-700 transition">
    Get Started
  </button>
</div>

<blockquote class="border-l-4 border-blue-500 pl-6 py-4 my-8">
  <p class="text-xl md:text-2xl font-light italic text-gray-700 leading-relaxed mb-4">
    "Design is not just what it looks like and feels like. Design is how it works."
  </p>
  <cite class="text-sm font-semibold text-gray-900 not-italic">
    — Steve Jobs
  </cite>
</blockquote>

<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-600 to-blue-600 px-4">
  <div class="max-w-4xl text-center text-white">
    <!-- Eyebrow text -->
    <p class="text-sm md:text-base font-medium uppercase tracking-widest mb-4 opacity-90">
      Welcome to the Future
    </p>
    
    <!-- Main heading -->
    <h1 class="text-5xl md:text-6xl lg:text-7xl font-black leading-tight mb-6 tracking-tight">
      Build Faster.<br>
      Ship Better.
    </h1>
    
    <!-- Subheading -->
    <p class="text-lg md:text-xl lg:text-2xl font-light leading-relaxed mb-10 max-w-2xl mx-auto">
      The modern development platform that helps teams build and deploy
      applications faster than ever before.
    </p>
    
    <!-- CTA buttons -->
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="px-8 py-4 bg-white text-purple-600 font-bold rounded-lg hover:bg-gray-100 transition text-lg">
        Start Free Trial
      </button>
      <button class="px-8 py-4 bg-transparent border-2 border-white font-bold rounded-lg hover:bg-white hover:text-purple-600 transition text-lg">
        Watch Demo
      </button>
    </div>
  </div>
</section>