<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
      p-4
      w-full
      flex flex-col
      rounded-lg
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
    "
  >
    <!--dot-->
    <div class="absolute top-3 right-3 h-2 w-2 rounded-full bg-muted-300"></div>

    <div
      class="
        flex
        items-center
        gap-2
        font-medium
        text-muted-900
        dark:text-white
        pb-2
        mb-2
        xl:border-b
        border-muted-200 border-opacity-75
        dark:border-muted-700
        w-full
      "
    >
      <img
        src="/img/avatars/52.jpg"
        class="w-14 h-14 mask mask-blob"
        alt="user photo"
        width="56"
        height="56"
      />
      <div class="font-sans text-left leading-tight">
        <h4 class="text-lg">Anna Simons</h4>
        <p class="text-sm text-muted-400">London, UK</p>
      </div>
    </div>
    <div class="flex items-center w-full">
      <div
        class="
          font-sans
          text-xs
          p-2
          leading-none
          dark:bg-muted-900
          bg-primary-100
          text-primary-500
          rounded-md
        "
      >
        UX Design
      </div>
      <div class="ml-auto">
        <div
          class="
            relative
            h-1
            w-16
            bg-slate-200
            dark:bg-slate-800
            overflow-hidden
            rounded-sm
          "
        >
          <div
            class="
              absolute
              top-0
              left-0
              h-full
              rounded-sm
              transition
              duration-300
              bg-primary-500
              w-10/12
            "
          ></div>
        </div>
      </div>
    </div>
  </div>
  <!--Item-->
  <div
    class="
      relative
      -right-8
      p-4
      w-full
      flex flex-col
      rounded-lg
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
    "
  >
    <!--dot-->
    <div class="absolute top-3 right-3 h-2 w-2 rounded-full bg-muted-300"></div>

    <div
      class="
        flex
        items-center
        gap-2
        font-medium
        text-muted-900
        dark:text-white
        pb-2
        mb-2
        xl:border-b
        border-muted-200 border-opacity-75
        dark:border-muted-700
        w-full
      "
    >
      <img
        src="/img/avatars/58.jpg"
        class="w-14 h-14 mask mask-blob"
        alt="user photo"
        width="56"
        height="56"
      />
      <div class="font-sans text-left leading-tight">
        <h4 class="text-lg">Tara Wilson</h4>
        <p class="text-sm text-muted-400">San Diego, CA</p>
      </div>
    </div>
    <div class="flex items-center w-full">
      <div
        class="
          font-sans
          text-xs
          p-2
          leading-none
          dark:bg-muted-900
          bg-yellow-100
          text-yellow-600
          rounded-md
        "
      >
        Product
      </div>
      <div class="ml-auto">
        <div
          class="
            relative
            h-1
            w-16
            bg-slate-200
            dark:bg-slate-800
            overflow-hidden
            rounded-sm
          "
        >
          <div
            class="
              absolute
              top-0
              left-0
              h-full
              rounded-sm
              transition
              duration-300
              bg-primary-500
              w-4/12
            "
          ></div>
        </div>
      </div>
    </div>
  </div>
  <!--Item-->
  <div
    class="
      relative
      -left-8
      p-4
      w-full
      flex flex-col
      rounded-lg
      bg-white
      dark:bg-muted-800
      border border-muted-200
      dark:border-muted-700
    "
  >
    <!--dot-->
    <div class="absolute top-3 right-3 h-2 w-2 rounded-full bg-muted-300"></div>

    <div
      class="
        flex
        items-center
        gap-2
        font-medium
        text-muted-900
        dark:text-white
        pb-2
        mb-2
        xl:border-b
        border-muted-200 border-opacity-75
        dark:border-muted-700
        w-full
      "
    >
      <img
        src="/img/avatars/25.jpg"
        class="w-14 h-14 mask mask-blob"
        alt="user photo"
        width="56"
        height="56"
      />
      <div class="font-sans text-left leading-tight">
        <h4 class="text-lg">Andy Stork</h4>
        <p class="text-sm text-muted-400">New York, NY</p>
      </div>
    </div>
    <div class="flex items-center w-full">
      <div
        class="
          font-sans
          text-xs
          p-2
          leading-none
          dark:bg-muted-900
          bg-green-100
          text-green-600
          rounded-md
        "
      >
        Accounting
      </div>
      <div class="ml-auto">
        <div
          class="
            relative
            h-1
            w-16
            bg-slate-200
            dark:bg-slate-800
            overflow-hidden
            rounded-sm
          "
        >
          <div
            class="
              absolute
              top-0
              left-0
              h-full
              rounded-sm
              transition
              duration-300
              bg-primary-500
              w-6/12
            "
          ></div>
        </div>
      </div>
    </div>
  </div>
</div>
