Mini Calendar

<!--
  Day 94: Mini Calendar

  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
-->

<!-- Mini Calendar -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-2xl bg-white p-5 ring-1 ring-zinc-200/50 sm:p-8">
    <!-- Calendar Header -->
    <div class="mb-6 flex items-center justify-between gap-2">
      <button
        type="button"
        class="w-10 rounded-lg p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
        aria-label="Previous month"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-chevron-left inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M9.78 4.22a.75.75 0 0 1 0 1.06L7.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L5.47 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.75.75 0 0 1 1.06 0Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
      <h2 class="text-base font-semibold text-zinc-950 sm:text-lg">
        February 2026
      </h2>
      <button
        type="button"
        class="w-10 rounded-lg p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-600"
        aria-label="Next month"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-chevron-right inline-block size-4"
        >
          <path
            fill-rule="evenodd"
            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    </div>
    <!-- END Calendar Header -->

    <!-- Calendar Grid -->
    <div class="grid grid-cols-7 gap-1 sm:gap-2">
      <!-- Day Headers -->
      <div class="p-2 text-center text-xs font-medium text-zinc-500">Mon</div>
      <div class="p-2 text-center text-xs font-medium text-zinc-500">Tue</div>
      <div class="p-2 text-center text-xs font-medium text-zinc-500">Wed</div>
      <div class="p-2 text-center text-xs font-medium text-zinc-500">Thu</div>
      <div class="p-2 text-center text-xs font-medium text-zinc-500">Fri</div>
      <div class="p-2 text-center text-xs font-medium text-zinc-500">Sat</div>
      <div class="p-2 text-center text-xs font-medium text-zinc-500">Sun</div>
      <!-- END Day Headers -->

      <!-- Calendar Days -->
      <!-- Previous month dates -->
      <div class="p-2 text-center text-sm text-zinc-300">26</div>
      <div class="p-2 text-center text-sm text-zinc-300">27</div>
      <div class="p-2 text-center text-sm text-zinc-300">28</div>
      <div class="p-2 text-center text-sm text-zinc-300">29</div>
      <div class="p-2 text-center text-sm text-zinc-300">30</div>
      <div class="p-2 text-center text-sm text-zinc-300">31</div>
      <!-- END Previous month dates -->

      <!-- Current month dates -->
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        1
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        2
      </button>
      <button
        type="button"
        class="rounded-lg bg-indigo-600 p-2 text-center text-sm text-white"
      >
        3
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        4
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        5
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        6
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        7
      </button>

      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        8
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        9
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        10
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        11
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        12
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        13
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        14
      </button>

      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        15
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        16
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        17
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        18
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        19
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        20
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        21
      </button>

      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        22
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        23
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        24
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        25
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        26
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        27
      </button>
      <button
        type="button"
        class="rounded-lg p-2 text-center text-sm text-zinc-700 hover:bg-zinc-100"
      >
        28
      </button>

      <!-- Next month dates -->
      <div class="p-2 text-center text-sm text-zinc-300">1</div>
      <div class="p-2 text-center text-sm text-zinc-300">2</div>
      <div class="p-2 text-center text-sm text-zinc-300">3</div>
      <div class="p-2 text-center text-sm text-zinc-300">4</div>
      <div class="p-2 text-center text-sm text-zinc-300">5</div>
      <div class="p-2 text-center text-sm text-zinc-300">6</div>
      <div class="p-2 text-center text-sm text-zinc-300">7</div>
      <div class="p-2 text-center text-sm text-zinc-300">8</div>
      <!-- END Next month dates -->
      <!-- END Calendar Days -->
    </div>
    <!-- END Calendar Grid -->
  </div>
</div>
<!-- END Mini Calendar -->