<div class="card w-full max-w-sm">
  <div class="card-content grid gap-6">
    <img
      src="https://cdn.gufo.dev/stockphotos/1c7a7245.webp"
      alt="Sarah Johnson"
      class="w-full aspect-square object-cover rounded-card"
    />
    <div>
      <h3 class="text-lg font-semibold tracking-tight">Sarah Johnson</h3>
      <p class="text-sm/6 text-muted-foreground mt-2">
        Product Designer who focuses on simplicity &amp; usability. Currently
        designing at Acme Inc.
      </p>
    </div>
    <div class="flex items-center gap-6">
      <div class="flex items-center gap-2 text-sm text-foreground font-medium">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 text-muted-foreground"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
        <span>312</span>
      </div>
      <div class="flex items-center gap-2 text-sm text-foreground font-medium">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 text-muted-foreground"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>
        <span>48</span>
      </div>
      <button class="btn btn-primary btn-sm ml-auto">
        Follow
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
      </button>
    </div>
  </div>
</div>