<div
  class="
    hidden
    md:block
    absolute
    -top-12
    ptablet:-top-6
    -right-24
    bg-white
    dark:bg-muted-800
    border border-muted-200
    dark:border-muted-700
    rounded-xl
    p-5
    shadow-xl shadow-muted-400/10
    dark:shadow-muted-800/10
  "
>
  <div class="flex items-center gap-2 mb-2">
    <i class="iconify w-3 h-3 text-yellow-400" data-icon="uiw:star-on"></i>
    <i class="iconify w-3 h-3 text-yellow-400" data-icon="uiw:star-on"></i>
    <i class="iconify w-3 h-3 text-yellow-400" data-icon="uiw:star-on"></i>
    <i class="iconify w-3 h-3 text-yellow-400" data-icon="uiw:star-on"></i>
  </div>
  <p class="font-sans text-sm text-muted-400 max-w-[220px] leading-tight mb-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Obsecro, inquit.
  </p>
  <div class="flex items-center gap-2">
    <img
      class="object-cover w-8 h-8 mask mask-blob"
      src="/img/avatars/42.jpg"
      alt="Avatar"
    />
    <div>
      <h5
        class="
          font-heading font-semibold
          text-xs text-muted-800
          dark:text-muted-100
        "
      >
        Helen Miller
      </h5>
      <p class="font-sans text-xs text-muted-400">CEO @Convenant</p>
    </div>
  </div>
</div>
