Flight Card

<!--
  Day 81: Flight 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
-->

<!-- Flight Card -->
<div
  class="relative mx-auto w-full max-w-lg rounded-3xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="relative overflow-hidden rounded-3xl bg-white">
    <!-- Header -->
    <div class="relative overflow-hidden">
      <!-- Flight Status Badge -->
      <div class="absolute top-0 left-0 p-6">
        <span
          class="inline-flex items-center gap-1 rounded-full bg-zinc-900/50 px-2.5 py-1 text-sm font-medium text-white backdrop-blur-sm"
        >
          <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-check-circle inline-block size-4 text-white"
          >
            <path d="m9 12 2 2 4-4" />
            <circle cx="12" cy="12" r="10" />
          </svg>
          <span>On Time</span>
        </span>
      </div>
      <!-- END Flight Status Badge -->

      <!-- Favorite Button -->
      <div class="absolute top-0 right-0 p-6">
        <button
          type="button"
          class="inline-flex size-8 items-center justify-center rounded-full bg-zinc-900/50 text-white backdrop-blur-sm hover:bg-zinc-900 hover:text-red-400"
          aria-label="Favorite"
        >
          <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-heart inline-block size-4"
          >
            <path
              d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
            />
          </svg>
        </button>
      </div>
      <!-- END Favorite Button -->

      <!-- Flight Image -->
      <img
        src="https://images.unsplash.com/photo-1569154941061-e231b4725ef1?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
        alt="Airplane"
        class="aspect-16/9 w-full object-cover"
      />
      <!-- END Flight Image -->
    </div>
    <!-- END Header -->

    <!-- Flight Details -->
    <div class="p-6">
      <!-- Flight Route -->
      <div class="mb-2 flex items-center justify-between">
        <div class="text-center">
          <div class="text-2xl font-bold text-zinc-800">NYC</div>
          <div class="text-sm text-zinc-600">New York</div>
          <div class="text-xs text-zinc-500">JFK</div>
        </div>
        <div class="mx-4 flex flex-1 flex-col items-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-plane inline-block size-6 text-zinc-400"
          >
            <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>
          <div
            class="my-1.5 h-px w-full border-t border-dashed border-zinc-200"
          ></div>
          <div class="text-xs text-zinc-500">2h 15m</div>
        </div>
        <div class="text-center">
          <div class="text-2xl font-bold text-zinc-800">LAX</div>
          <div class="text-sm text-zinc-600">Los Angeles</div>
          <div class="text-xs text-zinc-500">LAX</div>
        </div>
      </div>
      <div class="flex items-center justify-between text-sm text-zinc-600">
        <span>8:30 AM</span>
        <span>Direct Flight</span>
        <span>10:45 AM</span>
      </div>
      <!-- END Flight Route -->

      <hr class="my-4 border-zinc-100" />

      <!-- Flight Info -->
      <div class="mb-4">
        <div class="flex flex-wrap gap-1.5">
          <span
            class="rounded-lg bg-zinc-200/50 px-2 py-1 text-xs font-medium text-zinc-700"
          >
            Economy
          </span>
          <span
            class="rounded-lg bg-zinc-200/50 px-2 py-1 text-xs font-medium text-zinc-700"
          >
            WiFi
          </span>
          <span
            class="rounded-lg bg-zinc-200/50 px-2 py-1 text-xs font-medium text-zinc-700"
          >
            Meal
          </span>
        </div>
      </div>
      <!-- END Flight Info -->

      <!-- Airline and Flight Number -->
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="flex items-center gap-2">
            <div
              class="flex size-8 items-center justify-center rounded-full bg-blue-100"
            >
              <span class="text-xs font-bold text-blue-600">AA</span>
            </div>
            <div>
              <div class="text-sm font-medium text-zinc-800">
                American Airlines
              </div>
              <div class="text-xs text-zinc-600">Flight AA1234</div>
            </div>
          </div>
        </div>
        <span
          class="inline-flex items-center gap-1 rounded-lg bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="hi-micro hi-check inline-block size-4"
          >
            <path
              fill-rule="evenodd"
              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
              clip-rule="evenodd"
            />
          </svg>
          <span>Confirmed</span>
        </span>
      </div>
      <!-- END Airline and Flight Number -->

      <hr class="my-4 border-zinc-100" />

      <!-- Price and Book Button -->
      <div class="flex items-center justify-between">
        <div>
          <div class="flex items-baseline gap-1">
            <span class="text-2xl font-bold text-zinc-800">$485</span>
            <span class="text-xs text-zinc-600">/person</span>
          </div>
          <p class="text-xs text-emerald-600">Refundable</p>
        </div>
        <button
          type="button"
          class="rounded-xl bg-blue-600 px-6 py-2.5 text-sm font-medium text-white shadow-lg shadow-blue-500/25 hover:bg-blue-700 hover:shadow-blue-500/50"
        >
          Book Now
        </button>
      </div>
      <!-- END Price and Book Button -->
    </div>
  </div>
</div>
<!-- END Flight Card -->