Restaurant Menu Base

<section class="ws-restaurant-menu bg-[var(--ws-color-surface)] py-16">
  <div class="mx-auto max-w-3xl px-6">
    <div class="text-center">
      <p class="text-sm font-semibold uppercase tracking-wider text-amber-600">Our Menu</p>
      <h2 class="mt-2 text-3xl font-bold text-slate-900">Delicious Dishes</h2>
      <p class="mt-3 text-lg text-slate-500">Fresh ingredients, crafted with care. Explore our seasonal offerings.</p>
    </div>

    <!-- Category Tabs -->
    <nav class="mt-10 flex flex-wrap justify-center gap-2" role="tablist" aria-label="Menu categories">
      <button role="tab" aria-selected="true" aria-controls="panel-starters" class="rounded-full bg-amber-600 px-5 py-2 text-sm font-medium text-white transition hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">Starters</button>
      <button role="tab" aria-selected="false" aria-controls="panel-mains" class="rounded-full bg-slate-100 px-5 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:hover:bg-slate-700 dark:focus:ring-offset-slate-900">Mains</button>
      <button role="tab" aria-selected="false" aria-controls="panel-desserts" class="rounded-full bg-slate-100 px-5 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:hover:bg-slate-700 dark:focus:ring-offset-slate-900">Desserts</button>
      <button role="tab" aria-selected="false" aria-controls="panel-drinks" class="rounded-full bg-slate-100 px-5 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:hover:bg-slate-700 dark:focus:ring-offset-slate-900">Drinks</button>
    </nav>

    <!-- Starters Panel (visible) -->
    <div id="panel-starters" role="tabpanel" aria-labelledby="tab-starters" class="mt-8">
      <dl class="space-y-6">
        <!-- Item 1 -->
        <div class="flex items-start gap-4">
          <div class="h-14 w-14 shrink-0 rounded-full bg-gradient-to-br from-amber-200 to-orange-300 dark:from-amber-700 dark:to-orange-800" aria-hidden="true"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline gap-2">
              <dt class="text-base font-semibold text-slate-900">Burrata Caprese</dt>
              <span class="flex-1 border-b-2 border-dashed border-slate-200" aria-hidden="true"></span>
              <dd class="text-base font-semibold text-amber-600">€12</dd>
            </div>
            <dd class="mt-1 text-sm text-slate-500">Creamy burrata with heirloom tomatoes, basil oil, and aged balsamic.</dd>
          </div>
        </div>

        <!-- Item 2 -->
        <div class="flex items-start gap-4">
          <div class="h-14 w-14 shrink-0 rounded-full bg-gradient-to-br from-green-200 to-emerald-300 dark:from-green-700 dark:to-emerald-800" aria-hidden="true"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline gap-2">
              <dt class="text-base font-semibold text-slate-900">Tuna Tartare</dt>
              <span class="flex-1 border-b-2 border-dashed border-slate-200" aria-hidden="true"></span>
              <dd class="text-base font-semibold text-amber-600">€16</dd>
            </div>
            <dd class="mt-1 text-sm text-slate-500">Fresh tuna with avocado mousse, sesame crisps, and ponzu dressing.</dd>
          </div>
        </div>

        <!-- Item 3 -->
        <div class="flex items-start gap-4">
          <div class="h-14 w-14 shrink-0 rounded-full bg-gradient-to-br from-red-200 to-rose-300 dark:from-red-700 dark:to-rose-800" aria-hidden="true"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline gap-2">
              <dt class="text-base font-semibold text-slate-900">Roasted Beetroot Soup</dt>
              <span class="flex-1 border-b-2 border-dashed border-slate-200" aria-hidden="true"></span>
              <dd class="text-base font-semibold text-amber-600">€9</dd>
            </div>
            <dd class="mt-1 text-sm text-slate-500">Velvety beetroot soup with crème fraîche, dill, and toasted walnuts.</dd>
          </div>
        </div>

        <!-- Item 4 -->
        <div class="flex items-start gap-4">
          <div class="h-14 w-14 shrink-0 rounded-full bg-gradient-to-br from-yellow-200 to-amber-300 dark:from-yellow-700 dark:to-amber-800" aria-hidden="true"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline gap-2">
              <dt class="text-base font-semibold text-slate-900">Crispy Calamari</dt>
              <span class="flex-1 border-b-2 border-dashed border-slate-200" aria-hidden="true"></span>
              <dd class="text-base font-semibold text-amber-600">€14</dd>
            </div>
            <dd class="mt-1 text-sm text-slate-500">Lightly fried squid rings with lemon aioli and chili flakes.</dd>
          </div>
        </div>

        <!-- Item 5 -->
        <div class="flex items-start gap-4">
          <div class="h-14 w-14 shrink-0 rounded-full bg-gradient-to-br from-purple-200 to-violet-300 dark:from-purple-700 dark:to-violet-800" aria-hidden="true"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline gap-2">
              <dt class="text-base font-semibold text-slate-900">Wild Mushroom Crostini</dt>
              <span class="flex-1 border-b-2 border-dashed border-slate-200" aria-hidden="true"></span>
              <dd class="text-base font-semibold text-amber-600">€11</dd>
            </div>
            <dd class="mt-1 text-sm text-slate-500">Toasted sourdough topped with sautéed wild mushrooms, truffle oil, and parmesan.</dd>
          </div>
        </div>
      </dl>
    </div>
  </div>
</section>