<div class="relative flex flex-col gap-6">
  <!--Polka dots-->
  <div class="absolute -top-5 -left-5 z-0">{{> shapes/polka}}</div>
  <div class="absolute -bottom-5 -right-5 z-0">{{> shapes/polka}}</div>

  <!--Items-->
  <div class="flex items-end gap-6">
    <!--Item-->
    <div class="w-full ltablet:w-2/3 lg:w-2/3">
      <div
        class="
          relative
          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
        "
      >
        <h4
          class="
            font-heading font-semibold
            text-muted-800
            dark:text-muted-100
            mb-2
          "
        >
          Top hiring sources
        </h4>
        <!--Fake chart legend-->
        <div class="flex gap-4 mb-12">
          <div class="flex items-center gap-2">
            <span class="block w-2 h-2 rounded-full bg-yellow-400"></span>
            <span class="font-sans text-xs text-muted-400">Website</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="block w-2 h-2 rounded-full bg-sky-500"></span>
            <span class="font-sans text-xs text-muted-400">Twitter</span>
          </div>
          <div class="flex items-center gap-2">
            <span class="block w-2 h-2 rounded-full bg-indigo-600"></span>
            <span class="font-sans text-xs text-muted-400">Linkedin</span>
          </div>
        </div>
        <!--Fake chart-->
        <div class="flex items-end justify-between gap-4">
          <div class="flex items-end justify-end gap-2 w-1/3">
            <div class="flex-1 h-10 rounded-md bg-yellow-300"></div>
            <div class="flex-1 h-16 rounded-md bg-sky-300"></div>
            <div class="flex-1 h-28 rounded-md bg-indigo-300"></div>
          </div>
          <div class="flex items-end justify-end gap-2 w-1/3">
            <div class="flex-1 h-20 rounded-md bg-yellow-300"></div>
            <div class="flex-1 h-28 rounded-md bg-sky-300"></div>
            <div class="flex-1 h-14 rounded-md bg-indigo-300"></div>
          </div>
          <div class="flex items-end justify-end gap-2 w-1/3">
            <div class="flex-1 h-16 rounded-md bg-yellow-300"></div>
            <div class="flex-1 h-24 rounded-md bg-sky-300"></div>
            <div class="flex-1 h-12 rounded-md bg-indigo-300"></div>
          </div>
        </div>
      </div>
    </div>
    <!--Item-->
    <div class="w-full md:w-1/3 ptablet:hidden">
      <div
        class="
          relative
          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-col text-center">
          <img
            class="object-cover w-14 h-14 mx-auto mb-2 mask mask-blob"
            src="/img/avatars/54.jpg"
            alt="Avatar"
            width="56"
            height="56"
          />
          <h4
            class="
              font-heading font-semibold
              text-muted-800
              dark:text-muted-100
            "
          >
            Amy Wright
          </h4>
          <p class="font-sans text-xs text-muted-400">UI/UX Designer</p>
          <div class="flex items-center justify-center gap-1 my-4">
            <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>
            <i
              class="iconify w-3 h-3 text-yellow-400"
              data-icon="uiw:star-on"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Item-->
  <div class="w-full flex justify-end">
    <div
      class="
        relative
        z-10
        w-full
        max-w-md
        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 items-center gap-4">
        <img
          class="object-cover w-14 h-14 mask mask-blob"
          src="/img/avatars/58.jpg"
          alt="Avatar"
          width="56"
          height="56"
        />
        <div>
          <h4
            class="
              font-heading font-semibold
              text-muted-800
              dark:text-muted-100
            "
          >
            Tara Wilson
          </h4>
          <p class="font-sans text-xs text-muted-400 mb-2">Product manager</p>
        </div>
        <div class="flex items-center gap-2 ml-auto">
          <button
            class="
              hidden
              ltablet:inline-block
              lg:inline-block
              font-sans
              text-sm
              h-10
              px-4
              border-2
              rounded-lg
              bg-rose-500/10
              border-rose-500
              text-rose-500
              hover:bg-rose-500 hover:text-white
              transition-colors
              duration-300
            "
          >
            Decline
          </button>
          <button
            class="
              font-sans
              text-sm
              h-10
              px-4
              border-2
              rounded-lg
              bg-emerald-500/10
              border-emerald-500
              text-emerald-500
              hover:bg-emerald-500 hover:text-white
              transition-colors
              duration-300
            "
          >
            Accept
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
