Quick Actions

<!--
  Day 48: Quick Actions

  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 -->
<div
  class="relative mx-auto w-full max-w-md rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="grid grid-cols-2 gap-2 p-4">
    <a
      href="javascript:void(0)"
      class="rounded-xl border border-zinc-100 bg-zinc-50 p-4 hover:border-zinc-200 active:border-zinc-100"
    >
      <div
        class="mb-2 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-zinc-800">New Project</h5>
      <p class="mt-0.5 text-xs font-medium text-zinc-500">
        Create a new project
      </p>
    </a>
    <a
      href="javascript:void(0)"
      class="rounded-xl border border-zinc-100 bg-zinc-50 p-4 hover:border-zinc-200 active:border-zinc-100"
    >
      <div
        class="mb-2 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-zinc-800">Schedule</h5>
      <p class="mt-0.5 text-xs font-medium text-zinc-500">View your calendar</p>
    </a>
    <a
      href="javascript:void(0)"
      class="rounded-xl border border-zinc-100 bg-zinc-50 p-4 hover:border-zinc-200 active:border-zinc-100"
    >
      <div
        class="mb-2 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-zinc-800">Notifications</h5>
      <p class="mt-0.5 text-xs font-medium text-zinc-500">Check your alerts</p>
    </a>
    <a
      href="javascript:void(0)"
      class="rounded-xl border border-zinc-100 bg-zinc-50 p-4 hover:border-zinc-200 active:border-zinc-100"
    >
      <div
        class="mb-2 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-zinc-800">Archive</h5>
      <p class="mt-0.5 text-xs font-medium text-zinc-500">Browse your files</p>
    </a>
    <a
      href="javascript:void(0)"
      class="col-span-2 rounded-xl border border-zinc-100 bg-zinc-50 p-4 hover:border-zinc-200 active:border-zinc-100"
    >
      <div
        class="mb-2 flex size-9 items-center justify-center rounded-lg bg-rose-200/75 text-rose-600"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-presentation-chart-bar inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M1.75 2a.75.75 0 0 0 0 1.5H2V9a2 2 0 0 0 2 2h.043l-1.004 3.013a.75.75 0 0 0 1.423.474L4.624 14h6.752l.163.487a.75.75 0 1 0 1.422-.474L11.957 11H12a2 2 0 0 0 2-2V3.5h.25a.75.75 0 0 0 0-1.5H1.75Zm8.626 9 .5 1.5H5.124l.5-1.5h4.752ZM5.25 7a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 1.5 0v-.5A.75.75 0 0 0 5.25 7ZM10 4.75a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0v-3.5ZM8 5.5a.75.75 0 0 0-.75.75v2a.75.75 0 0 0 1.5 0v-2A.75.75 0 0 0 8 5.5Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <h5 class="text-sm font-semibold text-zinc-800">Analytics Dashboard</h5>
      <p class="mt-0.5 text-xs font-medium text-zinc-500">
        View detailed performance metrics and reports
      </p>
    </a>
  </div>
</div>
<!-- END Quick Actions -->