Modern Story Card 2

<!--
  Day 91: Modern Story Card 2

  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 2 -->
<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-90"
>
  <div class="relative aspect-3/4 w-full overflow-hidden rounded-2xl">
    <!-- Background Image -->
    <img
      src="https://images.unsplash.com/photo-1478059299873-f047d8c5fe1a?q=80&w=900&auto=format&fit=crop"
      alt="Cover Image"
      class="aspect-3/4 w-full object-cover grayscale-75 transition ease-out group-hover:scale-105 group-hover:grayscale-0 group-active:scale-110"
    />
    <!-- END Background Image -->

    <!-- Overlay -->
    <div
      class="absolute inset-x-0 bottom-0 h-1/2 rounded-b-2xl bg-zinc-600/50 mask-t-from-50% backdrop-blur-xs transition-all duration-300 ease-out group-hover:bg-zinc-900/50 group-hover:opacity-0"
    ></div>
    <!-- END Overlay -->

    <!-- Content -->
    <div class="absolute inset-0 flex flex-col justify-between">
      <div
        class="p-7 text-right transition duration-300 ease-out group-hover:-translate-y-full"
      >
        <div
          class="inline-flex items-center gap-1.5 rounded-full bg-zinc-900/50 px-3 py-2 text-xs font-medium text-white backdrop-blur-sm"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            stroke="none"
            aria-hidden="true"
            class="lucide lucide-plane inline-block size-4"
          >
            <path
              d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"
            />
          </svg>
          <span>Travel</span>
        </div>
      </div>
      <div
        class="p-7 transition duration-300 ease-out group-hover:translate-y-full"
      >
        <h3 class="text-2xl font-black text-white">
          The Roadtrip of a Lifetime
        </h3>
        <p class="font-meidum mt-1 text-sm/relaxed text-white/90">
          The best roadtrip you can take in the US and Canada in 10 days.
        </p>
      </div>
    </div>
    <!-- END Content -->

    <!-- Arrow -->
    <div
      class="pointer-events-none absolute inset-0 flex scale-0 items-center justify-center opacity-0 transition duration-300 ease-out group-hover:scale-100 group-hover:opacity-100 group-active:scale-75"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
        class="lucide lucide-arrow-up-from-dot inline-block size-18 rotate-45 text-white"
      >
        <path d="m5 9 7-7 7 7" />
        <path d="M12 16V2" />
        <circle cx="12" cy="21" r="1" />
      </svg>
    </div>
    <!-- END Arrow -->
  </div>
</a>
<!-- END Modern Story Card 2 -->