Fine Dining Restaurant Tailwind CSS Template

Hero section code

The first screen of this free template, as it ships. Sign in to copy the full page.

<section id="_hero_gourmet_restaurant_v6_001" class="relative min-h-screen">
  <div class="absolute inset-0">
    <img data-motion="image" src="https://images.unsplash.com/photo-1767785445931-c4c57ae1b4e2?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMGZpbmV8ZW58MXwwfHx8MTc2OTMxODg5OHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Fine dining" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-linear-to-r from-slate-900/95 via-slate-900/60 to-transparent"></div>
  </div>
  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-screen flex items-center">
    <div class="max-w-2xl py-20">
      <span data-motion="badge" class="inline-flex items-center gap-2 text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-6">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
        Three Michelin Stars
      </span>
      <h1>
        <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-white leading-none tracking-tight">A Culinary</span>
        <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-indigo-400 leading-none tracking-tight mt-2">Journey</span>
      </h1>
      <p data-animate="text" class="mt-8 text-xl text-white/80 leading-relaxed">
        Where every dish tells a story. Experience the artistry of Chef Laurent's innovative tasting menus, crafted from the finest seasonal ingredients.
      </p>
      <div data-motion="button" class="flex flex-wrap gap-4 mt-10">
        <a href="#" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold transition-colors">Reserve Table</a>
        <a href="#" class="px-8 py-4 bg-white/10 backdrop-blur-xs text-white font-semibold border border-white/30 hover:bg-white/20 transition-colors">View Menu</a>
      </div>
      <div data-motion="info" class="mt-16 p-6 bg-white/10 backdrop-blur-xl rounded-2xl border border-white/20 inline-block">
        <div class="flex items-center gap-6">
          <div>
            <span class="text-white/60 text-sm">Dinner Service</span>
            <p class="text-white font-semibold">Tue - Sat, 6pm - 11pm</p>
          </div>
          <div>
            <span class="text-white/60 text-sm">Tasting Menu</span>
            <p class="text-white font-semibold">From $295 per person</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
    .carousel-container { overflow: hidden; }
  .carousel-track { display: flex; transition: transform 0.5s ease-out; }
  </style>

From template to your website

Open the editor to try colors, fonts, and screen sizes, then sign in with an account that includes this template to copy or download its HTML. It needs Tailwind CSS v4 and, for the dark theme, @custom-variant dark (&:where(.dark, .dark *));.

Text, images, and testimonials are placeholders. Replace them, and connect forms or booking to your own services before publishing. Usage is covered by the OpenTailwind license.