Modern Story Card

<!--
  Day 65: Modern Story Card

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

<!-- Modern Story Card -->
<a
  href="javascript:void(0)"
  class="group relative mx-auto flex w-full max-w-sm flex-col overflow-hidden rounded-3xl bg-white p-3 shadow-lg active:opacity-75"
>
  <div class="relative aspect-3/4 w-full overflow-hidden rounded-2xl">
    <!-- Background Image -->
    <img
      src="https://images.unsplash.com/photo-1536625979259-edbae645c7c3?q=80&w=900&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Cover Image"
      class="aspect-3/4 w-full object-cover transition ease-out group-hover:scale-105"
    />
    <!-- END Background Image -->

    <!-- Overlays -->
    <div
      class="absolute inset-0 bg-emerald-500/10 transition ease-out group-hover:bg-purple-500/10"
    ></div>
    <div
      class="absolute inset-x-0 bottom-0 h-1/2 rounded-b-2xl bg-emerald-600/50 mask-t-from-50% backdrop-blur-xs transition ease-out group-hover:bg-purple-600/50"
    ></div>
    <!-- END Overlays -->

    <!-- Content -->
    <div class="absolute inset-0 flex flex-col justify-between p-7">
      <div>
        <div
          class="inline-flex items-center gap-1.5 rounded-full bg-white/20 px-3 py-2 text-xs font-medium text-white backdrop-blur-xs"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-bookmark inline-block size-4"
          >
            <path
              d="M3.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.28.53L8 10.06l3.72 3.72a.75.75 0 0 0 1.28-.53V2.75a.75.75 0 0 0-.75-.75h-8.5Z"
            />
          </svg>
          <span>Featured</span>
        </div>
      </div>
      <div>
        <h3 class="text-2xl font-black text-white">Hiking adventure is on</h3>
        <p class="font-meidum mt-1 text-sm/relaxed text-white/90">
          How to prepare for a hiking adventure and what to bring.
        </p>
      </div>
    </div>
    <!-- END Content -->
  </div>
</a>
<!-- END Modern Story Card -->