<div class="relative w-full max-w-sm mx-auto space-y-4">
  <!--Background shape-->
  <div
    class="
      absolute
      top-0
      -left-10
      h-[480px]
      w-[480px]
      rotate-45
      mask mask-hexed
      bg-primary-50
      dark:bg-primary-500/5
      z-0
    "
  ></div>

  <!--Item-->
  <div
    class="
      relative
      -left-8
      z-10
      w-full
      p-5
      rounded-xl
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      shadow-xl shadow-muted-400/10
      dark:shadow-muted-800/10
    "
  >
    <div class="flex gap-4">
      <img
        class="object-cover w-14 h-14 mask mask-blob"
        src="/img/avatars/29.jpg"
        alt="Avatar"
        width="56"
        height="56"
      />
      <div>
        <h4
          class="font-heading font-semibold text-muted-800 dark:text-muted-100"
        >
          Christina Chu
        </h4>
        <p class="font-sans text-xs text-muted-400 mb-2">12 minutes ago</p>
        <p class="font-sans text-sm text-muted-500">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
  </div>
  <!--Item-->
  <div
    class="
      relative
      -right-8
      z-10
      w-full
      p-5
      rounded-xl
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      shadow-xl shadow-muted-400/10
      dark:shadow-muted-800/10
    "
  >
    <div class="flex flex-row-reverse gap-4">
      <img
        class="object-cover w-14 h-14 mask mask-blob"
        src="/img/avatars/44.jpg"
        alt="Avatar"
        width="56"
        height="56"
      />
      <div>
        <h4
          class="font-heading font-semibold text-muted-800 dark:text-muted-100"
        >
          Melany Stokes
        </h4>
        <p class="font-sans text-xs text-muted-400 mb-2">12 minutes ago</p>
        <p class="font-sans text-sm text-muted-500">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
  </div>
  <!--Item-->
  <div
    class="
      relative
      -left-8
      z-10
      w-full
      p-5
      rounded-xl
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
      shadow-xl shadow-muted-400/10
      dark:shadow-muted-800/10
    "
  >
    <div class="flex gap-4">
      <img
        class="object-cover w-14 h-14 mask mask-blob"
        src="/img/avatars/29.jpg"
        alt="Avatar"
        width="56"
        height="56"
      />
      <div>
        <h4
          class="font-heading font-semibold text-muted-800 dark:text-muted-100"
        >
          Christina Chu
        </h4>
        <p class="font-sans text-xs text-muted-400 mb-2">12 minutes ago</p>
        <p class="font-sans text-sm text-muted-500">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
    </div>
  </div>
</div>
