Casual 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_artisan_bakery_v6_001" class="py-20 sm:py-24 bg-indigo-50 dark:bg-neutral-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
      <div>
        <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-6 block">Baked Fresh Daily</span>
        <h1>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none">Crafted</span>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none mt-2">With</span>
          <span data-animate="heading" class="block text-5xl sm:text-6xl lg:text-7xl font-bold text-indigo-600 dark:text-indigo-400 leading-none mt-2">Love</span>
        </h1>
        <p data-animate="text" class="mt-8 text-xl text-slate-600 dark:text-neutral-400 leading-relaxed max-w-lg">
          Traditional recipes meet modern artistry. Every loaf, every pastry, every bite tells a story of passion and craftsmanship.
        </p>
        <div data-motion="button" class="flex flex-wrap gap-4 mt-10">
          <a data-motion="button" href="#" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors">Order Online</a>
          <a data-motion="button" href="#" class="px-8 py-4 bg-white dark:bg-neutral-900 text-slate-900 dark:text-white font-semibold rounded-full border-2 border-indigo-600 hover:bg-indigo-600 hover:text-white transition-all">Visit Bakery</a>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4">
        <div data-motion="image" class="col-span-2 rounded-3xl overflow-hidden h-72">
          <img data-motion="image" src="https://images.unsplash.com/photo-1763626080059-523898c7ffef?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMGNhc3VhbHxlbnwxfDB8fHwxNzY5MzE4OTAxfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Fresh bread" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
        </div>
        <div data-motion="image" class="rounded-2xl overflow-hidden h-48">
          <img data-motion="image" src="https://images.unsplash.com/photo-1765604552927-3b8491e3f854?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMGNhc3VhbHxlbnwxfDB8fHwxNzY5MzE4OTAxfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Croissants" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
        </div>
        <div data-motion="image" class="rounded-2xl overflow-hidden h-48">
          <img data-motion="image" src="https://images.unsplash.com/photo-1764391807640-a04554cbb166?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMGNhc3VhbHxlbnwxfDB8fHwxNzY5MzE4OTAxfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Pastries" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700">
        </div>
      </div>
    </div>
  </div>
</section>
<style>
    @keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes marquee-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }
  .marquee-left { animation: marquee-left 35s linear infinite; }
  .marquee-right { animation: marquee-right 35s linear infinite; }
  .marquee-container:hover .marquee-left,
  .marquee-container:hover .marquee-right { animation-play-state: paused; }
  </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.