Quick Actions Horizontal

<!--
  Day 53: Quick Actions Horizontal

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Quick Actions Horizontal -->
<div
  class="relative mx-auto rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="grid grid-cols-2 gap-2 p-4 text-center md:grid-cols-4">
    <a
      href="javascript:void(0)"
      class="rounded-xl bg-emerald-50 px-5 py-6 hover:bg-emerald-100/75 active:bg-emerald-50"
    >
      <div
        class="mx-auto mb-4 flex size-9 items-center justify-center rounded-lg bg-emerald-200/75 text-emerald-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-plus inline-block size-4"
        >
          <path
            d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
          />
        </svg>
      </div>
      <h5 class="text-sm font-semibold text-emerald-900">New Project</h5>
      <p class="mt-0.5 text-xs font-medium text-emerald-900/60">
        Create a new project
      </p>
    </a>
    <a
      href="javascript:void(0)"
      class="rounded-xl bg-blue-50 px-5 py-6 hover:bg-blue-100/75 active:bg-blue-50"
    >
      <div
        class="mx-auto mb-4 flex size-9 items-center justify-center rounded-lg bg-blue-200/75 text-blue-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-calendar-days inline-block size-4"
        >
          <path
            d="M5.75 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM5 10.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM10.25 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM7.25 8.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM8 9.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0-1.5Z"
          />
          <path
            fill-rule="evenodd"
            d="M4.75 1a.75.75 0 0 0-.75.75V3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2V1.75a.75.75 0 0 0-1.5 0V3h-5V1.75A.75.75 0 0 0 4.75 1ZM3.5 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v4.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <h5 class="text-sm font-semibold text-blue-900">Schedule</h5>
      <p class="mt-0.5 text-xs font-medium text-blue-900/60">
        View your calendar
      </p>
    </a>
    <a
      href="javascript:void(0)"
      class="rounded-xl bg-purple-50 px-5 py-6 hover:bg-purple-100/75 active:bg-purple-50"
    >
      <div
        class="mx-auto mb-4 flex size-9 items-center justify-center rounded-lg bg-purple-200/75 text-purple-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-bell inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <h5 class="text-sm font-semibold text-purple-900">Notifications</h5>
      <p class="mt-0.5 text-xs font-medium text-purple-900/60">
        Check your alerts
      </p>
    </a>
    <a
      href="javascript:void(0)"
      class="rounded-xl bg-amber-50 px-5 py-6 hover:bg-amber-100/75 active:bg-amber-50"
    >
      <div
        class="mx-auto mb-4 flex size-9 items-center justify-center rounded-lg bg-amber-200/75 text-amber-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-archive-box inline-block size-4"
        >
          <path
            d="M3 2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3Z"
          />
          <path
            fill-rule="evenodd"
            d="M3 6h10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6Zm3 2.75A.75.75 0 0 1 6.75 8h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 6 8.75Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <h5 class="text-sm font-semibold text-amber-900">Archive</h5>
      <p class="mt-0.5 text-xs font-medium text-amber-900/60">
        Browse your files
      </p>
    </a>
  </div>
</div>
<!-- END Quick Actions Horizontal -->