Bold Creative 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_ai_assistant_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-16 items-center mb-16">
      <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">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></span>
          AI-Powered
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6"><span data-animate="heading">Meet Your Smart AI Assistant</span></h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Experience the future of productivity. From automating tasks to generating insights, unlock new possibilities for your workflow.
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="#" data-motion="button" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full 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="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
            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">
            Watch Demo
          </a>
        </div>
      </div>
      <div class="relative" data-motion="image">
        <div class="rounded-3xl overflow-hidden">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&auto=format&fit=crop&q=80"
            alt="AI technology visualization"
            class="w-full h-[400px] lg:h-[500px] object-cover"
          >
        </div>
        <div data-motion="card" class="absolute -bottom-6 -left-6 p-5 bg-white dark:bg-neutral-900 rounded-2xl border border-slate-200 dark:border-neutral-800 max-w-xs">
          <div class="flex items-center gap-3 mb-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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
              </svg>
            </div>
            <div>
              <span class="text-slate-900 dark:text-white font-semibold block text-sm">Smart Suggestions</span>
              <span class="text-indigo-600 dark:text-indigo-400 text-xs">Active now</span>
            </div>
          </div>
          <p class="text-slate-600 dark:text-neutral-400 text-sm">AI analyzing your workflow patterns...</p>
        </div>
      </div>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors group">
        <div data-motion="icon" class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-800/40 transition-colors">
          <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
          </svg>
        </div>
        <h3 class="text-slate-900 dark:text-white font-semibold mb-2">Smart Writing</h3>
        <p class="text-slate-600 dark:text-neutral-400 text-sm">Generate compelling content and documents in seconds.</p>
      </div>
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors group">
        <div data-motion="icon" class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-800/40 transition-colors">
          <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-2">Data Insights</h3>
        <p class="text-slate-600 dark:text-neutral-400 text-sm">Transform raw data into actionable intelligence.</p>
      </div>
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors group">
        <div data-motion="icon" class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-800/40 transition-colors">
          <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </div>
        <h3 class="text-slate-900 dark:text-white font-semibold mb-2">Automation</h3>
        <p class="text-slate-600 dark:text-neutral-400 text-sm">Automate repetitive tasks and focus on what matters.</p>
      </div>
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors group">
        <div data-motion="icon" class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4 group-hover:bg-indigo-200 dark:group-hover:bg-indigo-800/40 transition-colors">
          <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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
          </svg>
        </div>
        <h3 class="text-slate-900 dark:text-white font-semibold mb-2">Integrations</h3>
        <p class="text-slate-600 dark:text-neutral-400 text-sm">Connect with your favorite tools effortlessly.</p>
      </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.