Minimal Clean 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_analytics_dashboard_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-start">
      <div class="lg:col-span-5 lg:sticky lg:top-24">
        <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">
            <svg class="w-4 h-4" 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>
            AI-Powered Analytics
          </span>
          <h1 class="text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white leading-tight mb-6"><span data-animate="heading">Turn Insights Into Business Results</span></h1>
          <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
            Unlock the full potential of your business data with intelligent analytics. Make smarter decisions faster with real-time dashboards.
          </p>
          <div class="flex flex-wrap gap-4 mb-10">
            <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 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 Demo
            </a>
          </div>
          <div class="space-y-3" data-motion="social-proof">
            <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400 text-sm">
              <svg class="w-5 h-5 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
              </svg>
              <span>No credit card required</span>
            </div>
            <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400 text-sm">
              <svg class="w-5 h-5 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
              </svg>
              <span>14-day free trial</span>
            </div>
            <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400 text-sm">
              <svg class="w-5 h-5 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
              </svg>
              <span>Cancel anytime</span>
            </div>
          </div>
        </div>
      </div>
      <div class="lg:col-span-7">
        <div data-motion="card" class="rounded-3xl overflow-hidden bg-slate-100 dark:bg-neutral-900 p-3 mb-5">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1640643639912-cf0ec7343b27?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxzb2Z0d2FyZSUyMHRlY2hub2xvZ3klMjBzdGFydHVwJTIwbWluaW1hbCUyMGNsZWFufGVufDF8MHx8fDE3NjkzMTgwOTh8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Analytics dashboard interface showing charts and metrics"
            class="w-full h-auto rounded-2xl"
          >
        </div>
        <div class="grid grid-cols-3 gap-5">
          <div data-motion="card" class="bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl p-5">
            <div data-motion="icon" class="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-3">
              <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="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>
            <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400 block">+127%</span>
            <span class="text-slate-600 dark:text-neutral-400 text-sm">Growth Rate</span>
          </div>
          <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-5">
            <div data-motion="icon" class="w-10 h-10 rounded-xl bg-slate-200 dark:bg-neutral-800 flex items-center justify-center mb-3">
              <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400" 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 7a4 4 0 11-8 0 4 4 0 018 0z"/>
              </svg>
            </div>
            <span class="text-2xl font-bold text-slate-900 dark:text-white block">50K+</span>
            <span class="text-slate-600 dark:text-neutral-400 text-sm">Active Users</span>
          </div>
          <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-5">
            <div data-motion="icon" class="w-10 h-10 rounded-xl bg-slate-200 dark:bg-neutral-800 flex items-center justify-center mb-3">
              <svg class="w-5 h-5 text-slate-600 dark:text-neutral-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>
            <span class="text-2xl font-bold text-slate-900 dark:text-white block">99.9%</span>
            <span class="text-slate-600 dark:text-neutral-400 text-sm">Uptime</span>
          </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.