Hot Yoga Studio 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_adventure_travel_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-2 gap-12 items-center mb-16">
      <div 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>
          Adventure Awaits
        </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">Sweat Your Stress Away</span></h1>
      </div>
      <div data-motion="text" class="lg:pt-12">
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Embarking on a mountain expedition can be a life-changing adventure. Our comprehensive guide covers everything from gear selection to altitude acclimatization.
        </p>
        <div class="flex flex-wrap gap-4">
          <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">
            Start Exploring
          </a>
          <a href="#" data-motion="button" class="inline-flex items-center gap-2 px-6 py-3 border border-slate-300 dark:border-neutral-700 hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors rounded-full text-slate-900 dark:text-white font-semibold">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Watch Video
          </a>
        </div>
      </div>
    </div>
    <div class="grid lg:grid-cols-3 gap-5">
      <div class="lg:col-span-2 lg:row-span-2" data-motion="card">
        <div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1602827114685-efbb2717da9f?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxwaG90b2dyYXBoeSUyMGNhbWVyYSUyMHN0dWRpbyUyMHlvZ2F8ZW58MXwwfHx8MTc2OTMxOTMxMXww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Majestic mountain peaks at sunrise"
            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/70 via-transparent to-transparent"></div>
          <div class="absolute bottom-6 left-6 right-6">
            <span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-2 block">Featured Destination</span>
            <h3 class="text-white text-2xl font-bold">Swiss Alps Expedition</h3>
            <p class="text-slate-300 text-sm mt-2">14-day guided trek through iconic peaks</p>
          </div>
        </div>
      </div>
      <div data-motion="card">
        <div class="relative rounded-3xl overflow-hidden h-64 group">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1758599879792-d6d5d4e3289c?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxwaG90b2dyYXBoeSUyMGNhbWVyYSUyMHN0dWRpbyUyMHlvZ2F8ZW58MXwwfHx8MTc2OTMxOTMxMXww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Hikers on mountain trail"
            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-5 left-5">
            <span class="text-white font-semibold">Guided Treks</span>
          </div>
        </div>
      </div>
      <div data-motion="card">
        <div class="relative rounded-3xl overflow-hidden h-64 group">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1700183023783-4f4d7b5bb07a?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxwaG90b2dyYXBoeSUyMGNhbWVyYSUyMHN0dWRpbyUyMHlvZ2F8ZW58MXwwfHx8MTc2OTMxOTMxMXww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Mountain camping at 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-5 left-5">
            <span class="text-white font-semibold">Base Camps</span>
          </div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-12 border-t border-slate-200 dark:border-neutral-800" data-motion="stats">
      <div class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">127</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Expeditions</span>
      </div>
      <div class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">45</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Countries</span>
      </div>
      <div class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">12K+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Adventurers</span>
      </div>
      <div class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">98%</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Success Rate</span>
      </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.