Italian 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_food_delivery_v6_001" class="py-20 sm:py-24 bg-white 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-12 gap-8 lg:gap-12 items-center">
      <div class="lg:col-span-7" data-motion="hero">
        <span data-motion="badge" class="inline-flex items-center gap-2 px-4 py-1.5 bg-indigo-100 dark:bg-indigo-900/40 rounded-full text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-6">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Free Delivery on First Order
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">
          <span data-animate="heading">Fresh Food</span><br>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">Fast Delivery</span>
        </h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8 max-w-xl" data-animate="text">
          From local favorites to gourmet cuisines, satisfy your cravings in minutes. Fresh ingredients, expert chefs, delivered to your door.
        </p>
        <div class="flex flex-col sm:flex-row gap-3 mb-8">
          <div class="flex-1 relative" data-motion="input">
            <input data-motion="input" type="text" placeholder="Enter your delivery address" class="w-full px-5 py-3 pr-12 bg-slate-50 dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 rounded-full text-slate-900 dark:text-white placeholder-slate-400 focus:outline-hidden focus:border-indigo-500" />
            <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          </div>
          <a href="#" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold whitespace-nowrap">
            Find Food
          </a>
        </div>
        <div class="grid grid-cols-3 gap-6" data-motion="stats">
          <div>
            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">25</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Min Delivery</span>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Restaurants</span>
          </div>
          <div>
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">4.9</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">App Rating</span>
          </div>
        </div>
      </div>
      <div class="lg:col-span-5">
        <div class="relative" data-motion="image">
          <div class="rounded-3xl overflow-hidden">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1574738413599-9b49f289f9eb?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMGl0YWxpYW58ZW58MXwwfHx8MTc2OTMxODkwNHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Delicious food spread"
              class="w-full h-[400px] lg:h-[500px] object-cover"
            >
          </div>
          <div data-motion="card" class="absolute -bottom-4 -left-4 bg-white dark:bg-neutral-900 rounded-2xl p-4 border border-slate-200 dark:border-neutral-800">
            <div class="flex items-center gap-3">
              <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/40 rounded-full flex items-center justify-center">
                <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10"/>
                  <polyline points="12 6 12 12 16 14"/>
                </svg>
              </div>
              <div>
                <p class="text-slate-500 dark:text-neutral-400 text-xs">Avg. Delivery</p>
                <p class="text-indigo-600 dark:text-indigo-400 font-bold">25 min</p>
              </div>
            </div>
          </div>
          <div data-motion="card" class="absolute top-4 right-4 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xs rounded-full px-3 py-1.5 flex items-center gap-1">
            <svg class="w-4 h-4 text-indigo-400" 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>
            <span class="text-slate-900 dark:text-white font-semibold text-sm">4.9</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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.