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

  <!--Grid-->
  <div class="relative grid grid-cols-1 md:grid-cols-2 gap-6 z-10">
    <!--Grid item-->
    <div
      class="
        w-full
        p-6
        ptablet:p-4
        rounded-2xl
        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">
        <span
          class="
            flex
            items-center
            justify-center
            w-8
            h-8
            rounded-full
            bg-yellow-100
            dark:bg-yellow-400/10
            text-yellow-500
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:lightning-duotone"></i>
        </span>
        <span
          class="ml-2 text-sm font-medium text-muted-500 dark:text-muted-300"
        >
          Active users
        </span>
      </div>
      <span
        class="
          block
          fon-sans
          text-3xl text-muted-800
          dark:text-muted-100
          font-semibold
          mt-4
        "
      >
        79,320
      </span>
      <div class="flex font-sans text-xs mt-3 font-medium">
        <span class="text-green-500">+8%</span>
        <span class="ml-1 text-muted-500 dark:text-muted-400">this year</span>
      </div>
    </div>
    <!--Grid item-->
    <div
      class="
        w-full
        p-6
        ptablet:p-4
        rounded-2xl
        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">
        <span
          class="
            flex
            items-center
            justify-center
            w-8
            h-8
            rounded-full
            bg-primary-100
            dark:bg-primary-500/10
            text-primary-500
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:briefcase-duotone"></i>
        </span>
        <span
          class="ml-2 text-sm font-medium text-muted-500 dark:text-muted-300"
        >
          Jobs listed
        </span>
      </div>
      <span
        class="
          block
          font-sans
          text-3xl text-muted-800
          dark:text-muted-100
          font-semibold
          mt-4
        "
      >
        289,378
      </span>
      <div class="flex font-sans text-xs mt-3 font-medium">
        <span class="text-green-500">+19%</span>
        <span class="ml-1 text-muted-500 dark:text-muted-400">this year</span>
      </div>
    </div>
    <!--Grid item-->
    <div
      class="
        w-full
        p-6
        ptablet:p-4
        rounded-2xl
        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">
        <span
          class="
            flex
            items-center
            justify-center
            w-8
            h-8
            rounded-full
            bg-emerald-100
            dark:bg-emerald-500/10
            text-emerald-500
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:handshake-duotone"></i>
        </span>
        <span
          class="ml-2 text-sm font-medium text-muted-500 dark:text-muted-300"
        >
          Hires signed
        </span>
      </div>
      <span
        class="
          block
          font-sans
          text-3xl text-muted-800
          dark:text-muted-100
          font-semibold
          mt-4
        "
      >
        56,228
      </span>
      <div class="flex font-sans text-xs mt-3 font-medium">
        <span class="text-green-500">+19%</span>
        <span class="ml-1 text-muted-500 dark:text-muted-400">this year</span>
      </div>
    </div>
    <!--Grid item-->
    <div
      class="
        w-full
        p-6
        ptablet:p-4
        rounded-2xl
        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">
        <span
          class="
            flex
            items-center
            justify-center
            w-8
            h-8
            rounded-full
            bg-pink-100
            dark:bg-pink-500/10
            text-pink-500
          "
        >
          <i class="iconify w-5 h-5" data-icon="ph:timer-duotone"></i>
        </span>
        <span
          class="ml-2 text-sm font-medium text-muted-500 dark:text-muted-300"
        >
          Time lost
        </span>
      </div>
      <span
        class="
          block
          font-sans
          text-3xl text-muted-800
          dark:text-muted-100
          font-semibold
          mt-4
        "
      >
        -25K hrs
      </span>
      <div class="flex font-sans text-xs mt-3 font-medium">
        <span class="text-rose-500">-15%</span>
        <span class="ml-1 text-muted-500 dark:text-muted-400">this year</span>
      </div>
    </div>
  </div>
</div>
