Mexican 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_ocean_resort_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="text-center max-w-3xl mx-auto mb-16">
      <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-widest uppercase mb-4 block">Maldives Collection</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-tight">Paradise</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-tight">Found</span>
      </h1>
      <p data-animate="text" class="mt-8 text-xl text-slate-600 dark:text-neutral-400 leading-relaxed">
        Where crystal waters meet endless horizons. Experience the ultimate in barefoot luxury at our exclusive overwater villas.
      </p>
    </div>
    <div class="grid md:grid-cols-4 gap-4">
      <div data-motion="image" class="md:col-span-2 md:row-span-2 relative rounded-3xl overflow-hidden h-[400px] md:h-auto group">
        <img data-motion="image" src="https://images.unsplash.com/photo-1555242301-090c3211ae73?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMG1leGljYW58ZW58MXwwfHx8MTc2OTMxODkxNHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Overwater villa" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
        <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 to-transparent"></div>
        <div class="absolute bottom-6 left-6 right-6">
          <span data-motion="badge" class="text-indigo-400 text-sm font-semibold">Signature Experience</span>
          <h3 class="text-2xl font-bold text-white mt-1">Overwater Villas</h3>
        </div>
      </div>
      <div data-motion="image" class="relative rounded-2xl overflow-hidden h-48 group">
        <img data-motion="image" src="https://images.unsplash.com/photo-1758701446511-0c87a9aaddc0?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMG1leGljYW58ZW58MXwwfHx8MTc2OTMxODkxNHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Spa" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
        <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 to-transparent"></div>
        <div class="absolute bottom-4 left-4">
          <span class="text-white font-semibold">Ocean Spa</span>
        </div>
      </div>
      <div data-motion="image" class="relative rounded-2xl overflow-hidden h-48 group">
        <img data-motion="image" src="https://images.unsplash.com/photo-1759120156608-716c360950a3?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMG1leGljYW58ZW58MXwwfHx8MTc2OTMxODkxNHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Dining" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
        <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 to-transparent"></div>
        <div class="absolute bottom-4 left-4">
          <span class="text-white font-semibold">Fine Dining</span>
        </div>
      </div>
      <div data-motion="image" class="relative rounded-2xl overflow-hidden h-48 group">
        <img data-motion="image" src="https://images.unsplash.com/photo-1766068969015-e5286931a210?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMG1leGljYW58ZW58MXwwfHx8MTc2OTMxODkxNHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Beach" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
        <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 to-transparent"></div>
        <div class="absolute bottom-4 left-4">
          <span class="text-white font-semibold">Private Beach</span>
        </div>
      </div>
      <div data-motion="image" class="relative rounded-2xl overflow-hidden h-48 group">
        <img data-motion="image" src="https://images.unsplash.com/photo-1765100214386-917b0ce6db9e?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxyZXN0YXVyYW50JTIwZm9vZCUyMGRpbmluZyUyMG1leGljYW58ZW58MXwwfHx8MTc2OTMxODkxNHww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Sunset" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
        <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 to-transparent"></div>
        <div class="absolute bottom-4 left-4">
          <span class="text-white font-semibold">Sunset Cruises</span>
        </div>
      </div>
    </div>
    <div data-motion="button" class="flex justify-center gap-4 mt-12">
      <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">Book Your Escape</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 border-slate-200 dark:border-neutral-700 hover:border-indigo-500 transition-colors">Virtual Tour</a>
    </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.