Crossfit Box 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_health_tracking_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-4 gap-5">
      <div class="lg:col-span-2 bg-indigo-50 dark:bg-indigo-950/20 rounded-3xl p-8 lg:p-10" 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">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
          </svg>
          Health Companion
        </span>
        <h1 class="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white leading-tight mb-6">
          <span data-animate="heading">Track Your</span><br>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">Wellness</span>
        </h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Monitor health metrics, set goals, and get AI-powered insights to live your healthiest life.
        </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">
            Get Started Free
          </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">
            How It Works
            <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="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
        <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-4">
          <svg class="w-5 h-5 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
          </svg>
        </div>
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">72</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">BPM Heart Rate</span>
        <span class="text-indigo-600 dark:text-indigo-400 text-xs mt-2 block">Normal</span>
      </div>
      <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
        <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-4">
          <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="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
        </div>
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">8,432</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Steps Today</span>
        <div class="mt-2 h-1.5 bg-slate-200 dark:bg-neutral-700 rounded-full overflow-hidden">
          <div class="h-full w-[84%] bg-indigo-500 rounded-full"></div>
        </div>
      </div>
      <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
        <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-4">
          <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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
          </svg>
        </div>
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">7h 24m</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Sleep Duration</span>
        <span class="text-indigo-600 dark:text-indigo-400 text-xs mt-2 block">Quality: 92%</span>
      </div>
      <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
        <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-4">
          <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 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"/>
          </svg>
        </div>
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">1,847</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Calories Burned</span>
        <span class="text-indigo-600 dark:text-indigo-400 text-xs mt-2 block">Goal: 2,000</span>
      </div>
      <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">500K+</span>
        <span class="text-slate-600 dark:text-neutral-400">Users worldwide</span>
        <div class="flex items-center gap-1 mt-3">
          <div class="flex text-indigo-400">
            <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-sm text-slate-600 dark:text-neutral-400">4.9 rating</span>
        </div>
      </div>
      <div class="lg:col-span-4 flex flex-wrap items-center justify-center gap-6 pt-4" data-motion="social-proof">
        <div class="flex -space-x-2">
          <img data-motion="avatar" src="https://images.unsplash.com/photo-1706029831374-e236f69cbe8b?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxneW0lMjBmaXRuZXNzJTIwdHJhaW5pbmclMjBjcm9zc2ZpdCUyMGJveHxlbnwxfDB8fHwxNzY5MzE5MzAyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
          <img data-motion="avatar" src="https://images.unsplash.com/photo-1706029831377-bbcb4d15c1a7?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxneW0lMjBmaXRuZXNzJTIwdHJhaW5pbmclMjBjcm9zc2ZpdCUyMGJveHxlbnwxfDB8fHwxNzY5MzE5MzAyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
          <img data-motion="avatar" src="https://images.unsplash.com/photo-1652191109798-52c213534a9c?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxneW0lMjBmaXRuZXNzJTIwdHJhaW5pbmclMjBjcm9zc2ZpdCUyMGJveHxlbnwxfDB8fHwxNzY5MzE5MzAyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
        </div>
        <span class="text-slate-600 dark:text-neutral-400 text-sm">Loved by health enthusiasts worldwide</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.