<div class="card">
  <img src="https://images.pexels.com/photos/7034439/pexels-photo-7034439.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Blog post cover" class="aspect-video object-cover rounded-t-xl" />
  <div class="card-content grid gap-6">
    <div class="grid gap-2">
      <span class="flex items-center gap-1.5 text-xs/5 font-medium text-muted-foreground">
        <a href="#">Mar 15, 2024</a>
        <span>·</span>
        <a href="#">Articles</a>
      </span>
      <h3 class="text-lg/6 font-semibold">Building Modern Web Applications with Laravel and React</h3>
      <p class="text-sm/6 text-muted-foreground">Learn how to build scalable and maintainable web applications using React and modern development practices.</p>
    </div>
    <div class="flex items-center gap-3">
      <img class="avatar" src="https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&fit=crop" alt="Sarah Johnson" />
      <div class="grid gap-1.5">
        <span class="text-sm/none font-medium">Sarah Johnson</span>
        <span class="text-xs/none text-muted-foreground font-medium">Technical Writer</span>
      </div>
    </div>
  </div>
</div>