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_booking_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-5 order-2 lg:order-1">
        <div data-motion="hero">
          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block">Explore the World</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">Find Your Inner Peace</span></h1>
          <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
            Discover handpicked destinations and create memories that last a lifetime. From mountain peaks to ocean depths.
          </p>
        </div>
        <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-3xl p-6 mb-8">
          <div class="space-y-4">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="text-slate-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wider mb-2 block">Destination</label>
                <div class="flex items-center gap-2 bg-white dark:bg-neutral-800 rounded-xl px-4 py-3 border border-slate-200 dark:border-neutral-700">
                  <svg class="w-5 h-5 text-indigo-500" 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>
                  <span class="text-slate-900 dark:text-white font-medium">Patagonia</span>
                </div>
              </div>
              <div>
                <label class="text-slate-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wider mb-2 block">Travelers</label>
                <div class="flex items-center gap-2 bg-white dark:bg-neutral-800 rounded-xl px-4 py-3 border border-slate-200 dark:border-neutral-700">
                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                  </svg>
                  <span class="text-slate-900 dark:text-white font-medium">2 Adults</span>
                </div>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label class="text-slate-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wider mb-2 block">Check In</label>
                <div class="flex items-center gap-2 bg-white dark:bg-neutral-800 rounded-xl px-4 py-3 border border-slate-200 dark:border-neutral-700">
                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                  </svg>
                  <span class="text-slate-900 dark:text-white font-medium">Mar 15</span>
                </div>
              </div>
              <div>
                <label class="text-slate-500 dark:text-neutral-400 text-xs font-medium uppercase tracking-wider mb-2 block">Check Out</label>
                <div class="flex items-center gap-2 bg-white dark:bg-neutral-800 rounded-xl px-4 py-3 border border-slate-200 dark:border-neutral-700">
                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                  </svg>
                  <span class="text-slate-900 dark:text-white font-medium">Mar 22</span>
                </div>
              </div>
            </div>
            <a href="#" data-motion="button" class="w-full flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-xl px-6 py-4 text-white font-semibold">
              Search Adventures
              <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="grid grid-cols-3 gap-6" data-motion="stats">
          <div class="text-center">
            <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 block">500+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Destinations</span>
          </div>
          <div class="text-center">
            <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 block">50K+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Travelers</span>
          </div>
          <div class="text-center">
            <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 block">4.9★</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Rating</span>
          </div>
        </div>
      </div>
      <div class="lg:col-span-7 order-1 lg:order-2">
        <div class="relative" data-motion="image">
          <div class="rounded-3xl overflow-hidden">
            <img data-motion="image"
              src="https://images.unsplash.com/photo-1767611120077-3697335ec748?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHx5b2dhJTIwbWVkaXRhdGlvbiUyMHdlbGxuZXNzJTIwc3R1ZGlvfGVufDF8MHx8fDE3NjkzMTkzMDl8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
              alt="Mountain landscape adventure destination"
              class="w-full h-[400px] lg:h-[600px] object-cover"
            >
          </div>
          <div data-motion="card" class="absolute bottom-6 left-6 p-5 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-xs rounded-2xl max-w-xs">
            <div class="flex items-center gap-3 mb-3">
              <div data-motion="icon" class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/40 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">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
                </svg>
              </div>
              <div>
                <span class="text-slate-900 dark:text-white font-semibold block">Featured Trip</span>
                <span class="text-indigo-600 dark:text-indigo-400 text-sm">Patagonia Explorer</span>
              </div>
            </div>
            <p class="text-slate-600 dark:text-neutral-400 text-sm">7 days of breathtaking landscapes and unforgettable experiences.</p>
          </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.