Local business hero with hours

Create a local business hero with Tailwind CSS for a shop or restaurant. Use a two-column grid inside a bordered rounded-2xl card on a warm neutral-50 page. The left column has a small category line reading the trade and neighbourhood, a large headline with the business name, a two-sentence description, a row of two buttons — a dark "Book a table" and a bordered "Call us" with a phone glyph — and under them a green "Open now" pill with the closing time. The right column is an information panel divided by hairlines: an address block with a pin glyph and a "Get directions" link, an opening-hours list of seven rows with the day on the left and hours right-aligned, today set in medium weight with a subtle neutral-100 background, and a last row noting the kitchen closes earlier. Finish the card with a footer strip of three muted facts — payment methods, step-free access and dog policy.

<section class="bg-neutral-50 px-6 py-16">
  <div class="mx-auto max-w-5xl overflow-hidden rounded-2xl border border-neutral-200 bg-white">
    <div class="grid lg:grid-cols-2">
      <div class="p-9">
        <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Neighbourhood bistro · Kralingen</p>
        <h1 class="mt-4 text-4xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-5xl">Fern &amp; Fettle</h1>
        <p class="mt-4 max-w-md leading-relaxed text-neutral-500">
          Thirty covers, one changing menu, and whatever the market had that morning. We bake the bread, cure the fish, and take bookings two weeks ahead.
        </p>

        <div class="mt-7 flex flex-wrap gap-3">
          <a href="#" class="rounded-xl bg-neutral-900 px-6 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Book a table</a>
          <a href="#" class="flex items-center gap-2 rounded-xl border border-neutral-200 px-6 py-3 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50"><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="M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-5-2-1.5 2a14 14 0 0 1-7.5-7.5L9 8 7 3Z"/></svg> Call us</a>
        </div>

        <span class="mt-6 inline-flex items-center gap-2 rounded-full bg-green-100 px-3 py-1.5 text-xs font-medium text-green-700">
          <span class="h-1.5 w-1.5 rounded-full bg-green-600"></span> Open now · closes at 23:00
        </span>
      </div>

      <div class="border-t border-neutral-200 lg:border-l lg:border-t-0">
        <div class="flex items-start gap-3 border-b border-neutral-200 p-6">
          <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><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></span>
          <div>
            <p class="text-sm font-medium text-neutral-900">Voorschoterlaan 42</p>
            <p class="text-sm text-neutral-500">3062 KR Rotterdam</p>
            <a href="#" class="mt-1.5 inline-block text-xs font-medium text-neutral-900 underline underline-offset-4">Get directions <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="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
          </div>
        </div>

        <div class="p-6">
          <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Opening hours</p>
          <dl class="mt-4 space-y-1 text-sm">
            <div class="flex items-center justify-between rounded-lg px-2 py-1.5 text-neutral-500"><dt>Monday</dt><dd>Closed</dd></div>
            <div class="flex items-center justify-between rounded-lg bg-neutral-100 px-2 py-1.5 font-medium text-neutral-900"><dt>Tuesday</dt><dd>17:00 – 23:00</dd></div>
            <div class="flex items-center justify-between rounded-lg px-2 py-1.5 text-neutral-500"><dt>Wednesday</dt><dd>17:00 – 23:00</dd></div>
            <div class="flex items-center justify-between rounded-lg px-2 py-1.5 text-neutral-500"><dt>Thursday</dt><dd>17:00 – 23:00</dd></div>
            <div class="flex items-center justify-between rounded-lg px-2 py-1.5 text-neutral-500"><dt>Friday</dt><dd>17:00 – 00:00</dd></div>
            <div class="flex items-center justify-between rounded-lg px-2 py-1.5 text-neutral-500"><dt>Saturday</dt><dd>12:00 – 00:00</dd></div>
            <div class="flex items-center justify-between rounded-lg px-2 py-1.5 text-neutral-500"><dt>Sunday</dt><dd>12:00 – 21:00</dd></div>
          </dl>
          <p class="mt-3 text-xs text-neutral-400">The kitchen stops taking orders 45 minutes before closing.</p>
        </div>
      </div>
    </div>

    <div class="flex flex-wrap gap-x-8 gap-y-2 border-t border-neutral-200 bg-neutral-50 px-9 py-4 text-xs text-neutral-500">
      <span>Card and cash</span>
      <span>Step-free entrance and accessible WC</span>
      <span>Dogs welcome in the front room</span>
    </div>
  </div>
</section>