<div
  class="
    hidden
    md:block
    absolute
    -bottom-12
    -left-12
    bg-white
    dark:bg-muted-800
    border border-muted-200
    dark:border-muted-700
    rounded-xl
    p-6
    shadow-xl shadow-muted-400/10
    dark:shadow-muted-800/10
  "
>
  <div class="flex justify-between mb-4">
    <h3 class="font-heading font-semibold text-muted-800 dark:text-muted-100">
      Top 5%
    </h3>
    <span class="font-sans text-sm text-muted-400">3 new</span>
  </div>
  <div class="flex justify-between items-center gap-4">
    <img
      class="object-cover w-12 h-12 mask mask-blob"
      src="/img/avatars/48.jpg"
      alt="Avatar"
      width="48"
      height="48"
    />
    <img
      class="object-cover w-12 h-12 mask mask-blob"
      src="/img/avatars/39.jpg"
      alt="Avatar"
      width="48"
      height="48"
    />
    <img
      class="object-cover w-12 h-12 mask mask-blob"
      src="/img/avatars/26.jpg"
      alt="Avatar"
      width="48"
      height="48"
    />
    <img
      class="object-cover w-12 h-12 mask mask-blob"
      src="/img/avatars/25.jpg"
      alt="Avatar"
      width="48"
      height="48"
    />
  </div>
</div>
