Dog Grooming 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_wellness_retreat_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 lg:gap-8 items-center">
      <div data-motion="hero" class="space-y-8 lg:pr-8">
        <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase">Mindful Escapes</span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
          <span data-animate="heading">Find Your</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Inner</span>
          <span data-animate="heading"> Balance</span>
        </h1>
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 leading-relaxed max-w-lg">
          Escape the everyday and reconnect with yourself. Our wellness retreats combine ancient practices with modern comfort for transformative experiences.
        </p>
        <div data-motion="features" class="grid grid-cols-2 gap-4">
          <div class="flex items-center gap-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
              </svg>
            </div>
            <span class="text-slate-700 dark:text-neutral-300 text-sm">Yoga & Meditation</span>
          </div>
          <div class="flex items-center gap-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>
            <span class="text-slate-700 dark:text-neutral-300 text-sm">Spa Treatments</span>
          </div>
          <div class="flex items-center gap-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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"/>
              </svg>
            </div>
            <span class="text-slate-700 dark:text-neutral-300 text-sm">Nature Walks</span>
          </div>
          <div class="flex items-center gap-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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
              </svg>
            </div>
            <span class="text-slate-700 dark:text-neutral-300 text-sm">Wellness Workshops</span>
          </div>
        </div>
        <div class="flex flex-wrap items-center gap-4 pt-4">
          <a data-motion="button" href="#" class="px-8 py-3.5 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors">
            Book Your Retreat
          </a>
          <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 font-semibold hover:gap-3 transition-all duration-300">
            View Programs
            <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="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
          </a>
        </div>
      </div>
      <div class="relative">
        <div data-motion="image" class="rounded-3xl overflow-hidden h-[400px] lg:h-[500px]">
          <img data-motion="image" src="https://images.unsplash.com/photo-1601428317080-25b86da29a02?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxwZXQlMjBkb2clMjBjYXQlMjBjdXRlJTIwZ3Jvb21pbmd8ZW58MXwwfHx8MTc2OTMyMDU0OXww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Peaceful meditation by the lake" class="w-full h-full object-cover">
        </div>
        <div data-motion="card" class="absolute -bottom-6 -left-6 lg:-left-12 p-5 bg-white dark:bg-neutral-900 rounded-2xl">
          <div class="flex items-center gap-4">
            <div class="flex flex-col">
              <div class="flex items-center gap-1 mb-1">
                <span class="text-2xl font-bold text-slate-900 dark:text-white">4.9</span>
                <svg class="w-5 h-5 text-indigo-500" 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>
              </div>
              <span class="text-sm text-slate-500 dark:text-neutral-400">Guest Rating</span>
            </div>
            <div class="flex flex-col">
              <span class="text-2xl font-bold text-slate-900 dark:text-white">500+</span>
              <span class="text-sm text-slate-500 dark:text-neutral-400">Happy Guests</span>
            </div>
          </div>
        </div>
        <div data-motion="card" class="absolute -top-4 -right-4 lg:-right-8 p-4 bg-indigo-600 rounded-2xl text-white">
          <span data-motion="badge" class="text-xs font-medium uppercase tracking-wide opacity-80">Next Retreat</span>
          <span class="text-lg font-bold block mt-1">March 15-22</span>
          <span class="text-sm opacity-80">Limited spots</span>
        </div>
      </div>
    </div>
    <div data-motion="trust" class="mt-16 pt-8 border-t border-slate-200 dark:border-neutral-800">
      <div class="flex flex-wrap justify-center items-center gap-8 lg:gap-16">
        <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
          <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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
          </svg>
          <span class="text-sm">Certified Instructors</span>
        </div>
        <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
          <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span class="text-sm">Flexible Scheduling</span>
        </div>
        <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
          <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="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
          </svg>
          <span class="text-sm">Easy Refunds</span>
        </div>
        <div class="flex items-center gap-2 text-slate-500 dark:text-neutral-400">
          <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
          <span class="text-sm">Small Groups</span>
        </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.