Pediatric Clinic 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_fitness_training_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="flex flex-col gap-12">
      <div class="relative rounded-3xl overflow-hidden" data-motion="image">
        <img data-motion="image"
          src="https://images.unsplash.com/photo-1758691462126-2ee47c8bf9e7?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxtZWRpY2FsJTIwZG9jdG9yJTIwaGVhbHRoY2FyZSUyMHBlZGlhdHJpYyUyMGNsaW5pY3xlbnwxfDB8fHwxNzY5MzE5MDk5fDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
          alt="Fitness training"
          class="w-full h-72 sm:h-96 object-cover"
        >
        <div class="absolute inset-0 bg-linear-to-r from-slate-900/80 to-transparent"></div>
        <div class="absolute bottom-6 left-6 right-6" data-motion="hero">
          <span data-motion="badge" class="inline-flex items-center gap-2 px-3 py-1 bg-indigo-500/20 border border-indigo-500/30 rounded-full text-indigo-400 text-sm font-medium mb-4">
            <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
            Limited Spots
          </span>
          <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
            <span data-animate="heading">Transform Your</span>
            <span data-animate="heading" class="text-indigo-400"> Body</span>
          </h1>
        </div>
      </div>
      <div class="grid lg:grid-cols-5 gap-10">
        <div class="lg:col-span-3" data-motion="card">
          <p class="text-xl text-slate-600 dark:text-neutral-400 leading-relaxed mb-8" data-animate="text">
            Join our elite training program designed by world-class coaches. Get personalized workouts, nutrition plans, and 24/7 support to achieve your fitness goals.
          </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 Free Trial
            </a>
            <a href="#" data-motion="button" 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="lg:col-span-2 flex flex-col gap-5">
          <div class="bg-indigo-50 dark:bg-indigo-950/30 rounded-2xl p-6" data-motion="card">
            <span class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 block mb-1">15K+</span>
            <span class="text-slate-600 dark:text-neutral-400">Active members worldwide</span>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-5" data-motion="card">
              <span class="text-2xl font-bold text-slate-900 dark:text-white block">4.9</span>
              <div class="flex text-indigo-400 mt-1">
                <svg class="w-4 h-4" 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-slate-500 dark:text-neutral-400 text-xs">Rating</span>
            </div>
            <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-5" data-motion="card">
              <span class="text-2xl font-bold text-slate-900 dark:text-white block">50+</span>
              <span class="text-slate-500 dark:text-neutral-400 text-xs">Expert Coaches</span>
            </div>
          </div>
        </div>
      </div>
      <div class="grid grid-cols-3 gap-5">
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 text-center" data-motion="card">
          <div data-motion="icon" class="w-12 h-12 mx-auto bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
          </div>
          <h3 class="text-slate-900 dark:text-white font-semibold mb-1">24/7 Access</h3>
          <p class="text-slate-500 dark:text-neutral-400 text-sm">Train anytime, anywhere</p>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 text-center" data-motion="card">
          <div data-motion="icon" class="w-12 h-12 mx-auto bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 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="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>
          </div>
          <h3 class="text-slate-900 dark:text-white font-semibold mb-1">Expert Coaches</h3>
          <p class="text-slate-500 dark:text-neutral-400 text-sm">Certified professionals</p>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 text-center" data-motion="card">
          <div data-motion="icon" class="w-12 h-12 mx-auto bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
            </svg>
          </div>
          <h3 class="text-slate-900 dark:text-white font-semibold mb-1">Track Progress</h3>
          <p class="text-slate-500 dark:text-neutral-400 text-sm">Real-time results</p>
        </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.