Font Weight

<p class="font-thin">Thin (100)</p>
<p class="font-extralight">Extra Light (200)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semi Bold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extra Bold (800)</p>
<p class="font-black">Black (900)</p>

<!-- Font weight in a modern card design -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-blue-600 p-6 text-white">
    <h2 class="text-2xl font-bold mb-2">Modern Card Design</h2>
    <p class="text-lg font-medium italic">Subtitle with medium weight and italic style</p>
  </div>
  <div class="p-6">
    <p>This card uses different font weights to create a clear hierarchy.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold">
      Call to Action
    </button>
  </div>
</div>

<!-- Responsive typography with varying weights -->
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
  Responsive Heading
</h1>
<p class="text-base md:text-lg lg:text-xl font-normal mb-4">
  This paragraph uses a normal font weight, but you can adjust it based on screen size.
</p>
<p class="text-sm md:text-base lg:text-lg font-semibold">
  This text is semi-bold and adjusts size responsively.
</p>

<!-- Font weight in a modern interface -->
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-md overflow-hidden">
  <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-8 text-white">
    <h2 class="text-2xl font-extrabold mb-4">Dashboard Overview</h2>
    <p class="font-semibold">Welcome back to your analytics dashboard</p>
  </div>
  <div class="p-6">
    <div class="mb-6">
      <h3 class="text-lg font-semibold mb-2">Statistics</h3>
      <div class="grid grid-cols-3 gap-4 text-center">
        <div>
          <p class="font-bold text-xl">1,234</p>
          <p class="font-normal text-sm text-gray-600">Views</p>
        </div>
        <div>
          <p class="font-bold text-xl">$5,678</p>
          <p class="font-normal text-sm text-gray-600">Revenue</p>
        </div>
        <div>
          <p class="font-bold text-xl">90%</p>
          <p class="font-normal text-sm text-gray-600">Satisfaction</p>
        </div>
      </div>
    </div>
    <div>
      <h3 class="text-lg font-semibold mb-2">Recent Activity</h3>
      <div class="text-sm space-y-2">
        <p class="font-normal">New comment on your post</p>
        <p class="font-normal">Invoice #12345 paid</p>
        <p class="font-normal">New subscriber to your newsletter</p>
      </div>
    </div>
  </div>
</div>