Compact Story Card

<!--
  Day 51: Compact 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
-->

<!-- Compact Story Card -->
<div
  class="relative mx-auto w-full max-w-md rounded-3xl border border-slate-200 bg-white ring-4 ring-slate-300/25"
>
  <div class="flex flex-col gap-4 rounded-xl p-6">
    <!-- Cover -->
    <a href="javascript:void(0)" class="group relative">
      <div
        class="absolute inset-0 z-10 flex items-center justify-center rounded-xl bg-black/50 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-active:opacity-90"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="hi-outline hi-arrow-up-right inline-block size-6 transition duration-200 group-hover:scale-150 group-active:scale-100"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"
          />
        </svg>
      </div>
      <div
        class="absolute top-7 right-7 rounded-xl bg-purple-700/50 px-2 py-1 text-xs font-semibold tracking-wider text-white uppercase"
      >
        Travel
      </div>
      <img
        src="https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Story Image"
        class="aspect-16/9 w-full rounded-xl object-cover"
      />
    </a>
    <!-- END Cover -->

    <!-- Body -->
    <div class="grow">
      <div class="mb-1.5 text-sm font-medium text-slate-500">
        April 14, 2025 ∙ 20 min read
      </div>
      <h2 class="mb-2 text-xl font-extrabold">
        <a
          href="javascript:void(0)"
          class="hover:opacity-75 active:opacity-100"
        >
          Exploring New Zealand's Hidden Gems: A Journey Through Middle Earth
        </a>
      </h2>
      <p class="text-sm leading-relaxed text-slate-600">
        From the majestic fjords of Milford Sound to the geothermal wonders of
        Rotorua, New Zealand offers breathtaking landscapes at every turn.
      </p>
    </div>
    <!-- END Body -->
  </div>
</div>
<!-- END Compact Story Card -->