Booking hero with date fields

Build a booking hero with Tailwind CSS for a travel or venue site. Use a full-width section with a deep neutral-900 background and a faint diagonal pattern, holding a centred max-w-4xl column: a small pill with a star glyph and a rating line, a large white headline of two lines, a light grey subline, and then a white search card that sits slightly overlapping the bottom edge. The card is a grid of four cells divided by hairlines — destination with a pin glyph, check-in date, check-out date, and guests — each cell showing a tiny uppercase label above a value in medium weight, plus a dark circular search button at the right end that becomes full width when the cells stack on small screens. Under the card, a row of three muted quick links for popular searches. Keep the card raised with a soft shadow and rounded-2xl corners.

<section class="relative bg-neutral-900 px-6 pb-32 pt-24">
  <div class="pointer-events-none absolute inset-0 opacity-[0.07]" style="background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 14px)"></div>

  <div class="relative mx-auto max-w-4xl text-center">
    <span class="inline-flex items-center gap-2 rounded-full border border-neutral-700 px-3 py-1 text-xs text-neutral-300">
      <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-2.9-5.6 2.9 1.1-6.2L3 9.6l6.2-.9L12 3Z" fill="currentColor" stroke="none"/></svg> 4.9 from 24,000 stays
    </span>

    <h1 class="mt-6 text-5xl font-semibold leading-[1.05] tracking-tight text-white sm:text-6xl">
      Small hotels,<br class="hidden sm:block" /> chosen by people who stay in them
    </h1>
    <p class="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-neutral-400">
      Nine hundred independent places across Europe. No resort fees, no sponsored ordering, no fake urgency.
    </p>
  </div>

  <div class="relative mx-auto -mb-40 mt-12 max-w-4xl">
    <div class="grid overflow-hidden rounded-2xl bg-white shadow-2xl sm:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_0.9fr_auto]">
      <label class="cursor-pointer border-b border-neutral-200 px-5 py-4 text-left transition hover:bg-neutral-50 lg:border-b-0 lg:border-r">
        <span class="block text-[10px] font-medium uppercase tracking-widest text-neutral-400">Where</span>
        <span class="mt-1 flex items-center gap-1.5 text-sm font-medium text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg> Lisbon, Portugal</span>
      </label>
      <label class="cursor-pointer border-b border-neutral-200 px-5 py-4 text-left transition hover:bg-neutral-50 lg:border-b-0 lg:border-r">
        <span class="block text-[10px] font-medium uppercase tracking-widest text-neutral-400">Check in</span>
        <span class="mt-1 block text-sm font-medium text-neutral-900">Fri 12 Sep</span>
      </label>
      <label class="cursor-pointer border-b border-neutral-200 px-5 py-4 text-left transition hover:bg-neutral-50 lg:border-b-0 lg:border-r">
        <span class="block text-[10px] font-medium uppercase tracking-widest text-neutral-400">Check out</span>
        <span class="mt-1 block text-sm font-medium text-neutral-900">Mon 15 Sep</span>
      </label>
      <label class="cursor-pointer border-b border-neutral-200 px-5 py-4 text-left transition hover:bg-neutral-50 sm:border-b-0 lg:border-r">
        <span class="block text-[10px] font-medium uppercase tracking-widest text-neutral-400">Guests</span>
        <span class="mt-1 block text-sm font-medium text-neutral-900">2 adults</span>
      </label>
      <div class="p-3">
        <button class="flex h-full w-full items-center justify-center gap-2 rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="11" cy="11" r="7"/><path d="m16 16 4 4"/></svg> <span class="lg:hidden">Search</span>
        </button>
      </div>
    </div>

    <div class="mt-5 flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs text-neutral-500">
      <a href="#" class="hover:text-neutral-300">Weekends near Porto</a>
      <a href="#" class="hover:text-neutral-300">Places that take dogs</a>
      <a href="#" class="hover:text-neutral-300">Under €120 a night</a>
    </div>
  </div>
</section>
<div class="h-40"></div>