Tailwind CSS Blog Card

<div class="card w-full max-w-sm">
  <img
    src="https://images.pexels.com/photos/7433839/pexels-photo-7433839.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=768&amp;h=432&amp;fit=crop"
    alt="Team reviewing printed charts around a meeting table"
    class="aspect-video w-full object-cover"
  />
  <div class="card-header">
    <span
      class="flex items-center gap-1.5 text-xs font-medium tracking-tight text-muted-foreground"
      ><span>Mar 15, 2024</span><span>·</span><span>Finance</span></span
    >
    <h3 class="card-title">Reading Your Quarterly Numbers</h3>
    <p class="card-description">
      How to turn a stack of reports into two decisions your team can act on
      before the next quarter.
    </p>
  </div>
  <div class="card-footer gap-3">
    <span class="avatar avatar-lg"
      ><img
        class="avatar-image"
        alt="Leila Navarro"
        src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&amp;h=640&amp;fit=facearea&amp;facepad=2.8&amp;auto=format&amp;q=100&amp;bg-remove=true&amp;bg=e5e5e5"
      /><span class="avatar-fallback">LN</span></span
    >
    <div class="text-sm">
      <p class="font-medium text-foreground">Leila Navarro</p>
      <p class="text-muted-foreground">Finance Lead</p>
    </div>
  </div>
</div>