Dark Theme Modern 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_productivity_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-2 gap-12 items-center">
      <div data-motion="hero" class="space-y-8">
        <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">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          AI-Powered Insights
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-[1.1]">
          <span data-animate="heading">Transform Your</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Productivity</span>
        </h1>
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 max-w-lg">
          Streamline workflows, automate tasks, and unlock your team's full potential with intelligent project management.
        </p>
        <div class="flex flex-wrap gap-4">
          <a data-motion="button" href="#" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors">
            Start Free Trial
            <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="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
          </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">
            Watch Demo
            <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 data-motion="social-proof" class="flex items-center gap-4 pt-4">
          <div class="flex -space-x-2">
            <img data-motion="image" src="https://images.unsplash.com/photo-1763568258208-a5af30d5a31b?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxzb2Z0d2FyZSUyMHRlY2hub2xvZ3klMjBzdGFydHVwfGVufDF8MHx8fDE3NjkzMTgwOTR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-9 h-9 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <img data-motion="image" src="https://images.unsplash.com/photo-1763568258844-b31a923568b8?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxzb2Z0d2FyZSUyMHRlY2hub2xvZ3klMjBzdGFydHVwfGVufDF8MHx8fDE3NjkzMTgwOTR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-9 h-9 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <img data-motion="image" src="https://images.unsplash.com/photo-1763568258598-3ab9cf2516d9?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxzb2Z0d2FyZSUyMHRlY2hub2xvZ3klMjBzdGFydHVwfGVufDF8MHx8fDE3NjkzMTgwOTR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-9 h-9 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <img data-motion="image" src="https://images.unsplash.com/photo-1590097520505-416422f07ad1?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxzb2Z0d2FyZSUyMHRlY2hub2xvZ3klMjBzdGFydHVwfGVufDF8MHx8fDE3NjkzMTgwOTR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" class="w-9 h-9 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
          </div>
          <p class="text-sm text-slate-500 dark:text-neutral-400">Trusted by 50K+ teams</p>
        </div>
      </div>
      <div data-motion="image" class="relative">
        <div class="rounded-3xl overflow-hidden bg-slate-100 dark:bg-neutral-900">
          <img data-motion="image" src="https://images.unsplash.com/photo-1763568258121-3538ac983f31?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxzb2Z0d2FyZSUyMHRlY2hub2xvZ3klMjBzdGFydHVwfGVufDF8MHx8fDE3NjkzMTgwOTR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Dashboard interface" class="w-full aspect-4/3 object-cover">
        </div>
        <div data-motion="card" class="absolute -bottom-4 -left-4 p-4 bg-white dark:bg-neutral-800 rounded-xl max-w-[180px]">
          <div class="flex items-center gap-3">
            <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-full 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="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
              </svg>
            </div>
            <div>
              <span class="text-xl font-bold text-slate-900 dark:text-white block">+47%</span>
              <span class="text-xs text-slate-500 dark:text-neutral-400">Productivity</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16 pt-12 border-t border-slate-200 dark:border-neutral-800">
      <div data-motion="card" class="text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">50K+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Active Teams</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">99.9%</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Uptime</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">4.9</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">User Rating</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">24/7</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Support</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.