User Link with Hover Effect

<!--
  Day 3: User link with hover effect

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- User Link with Hover Effect -->
<div
  class="relative mx-auto w-full max-w-sm rounded-3xl bg-white/40 p-4 ring-8 shadow-sm shadow-slate-500/10 ring-slate-900/5"
>
  <a
    href="javascript:void(0)"
    class="flex items-center gap-3 rounded-lg border-l-4 border-transparent px-3 py-4 transition hover:border-indigo-400 hover:bg-white/75 active:border-indigo-500 active:bg-white active:shadow-xs"
  >
    <div class="relative flex-none">
      <img
        src="https://images.unsplash.com/photo-1567186937675-a5131c8a89ea?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=160&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=160"
        alt="User Avatar"
        class="size-11 rounded-full border-2 border-white/50"
      />
      <span
        class="absolute right-0 bottom-0 size-3 rounded-full border-2 border-white bg-emerald-500 shadow-xs"
      ></span>
    </div>
    <div class="grow">
      <p class="mb-0.5 line-clamp-1 text-sm font-bold">John Smith</p>
      <p class="line-clamp-1 text-xs font-medium text-slate-500">
        j.smith@example.com
      </p>
    </div>
    <div class="flex-none self-start">
      <p class="text-xs font-medium text-slate-400">Now</p>
    </div>
  </a>
</div>
<!-- END User Link with Hover Effect -->