Kids Party Planner 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_cinematic_story_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 mb-12">
      <div data-motion="hero">
        <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block">Cinematic Experience</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">Parties Kids Will Love</span></h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Dive into immersive narratives that transport you to worlds beyond imagination. Every frame tells a story waiting to be discovered.
        </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="currentColor" viewBox="0 0 24 24">
              <polygon points="5 3 19 12 5 21 5 3"/>
            </svg>
            Watch Trailer
          </a>
          <a href="#" data-motion="button" class="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">
            Learn More
          </a>
        </div>
      </div>
      <div data-motion="image" class="relative">
        <div class="rounded-3xl overflow-hidden">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1587616211892-f743fcca64f9?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMHByb2Zlc3Npb25hbCUyMG1vZGVybiUyMGtpZHMlMjBwYXJ0eXxlbnwxfDB8fHwxNzY5MzIwMjEyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Cinematic movie scene with dramatic lighting"
            class="w-full h-[400px] lg:h-[500px] object-cover"
          >
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <a href="#" class="w-20 h-20 rounded-full bg-indigo-600/90 hover:bg-indigo-600 transition-colors flex items-center justify-center">
            <svg class="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
              <polygon points="5 3 19 12 5 21 5 3"/>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="grid md:grid-cols-3 gap-5 mb-12">
      <div data-motion="card" class="bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl p-6 group cursor-pointer">
        <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold mb-3 block">Chapter 01</span>
        <h3 class="text-slate-900 dark:text-white font-semibold mb-2">The Beginning</h3>
        <p class="text-slate-600 dark:text-neutral-400 text-sm">An epic adventure starts with a single step into the unknown.</p>
        <div class="mt-4 w-full h-1 bg-indigo-200 dark:bg-indigo-800 rounded-full overflow-hidden">
          <div class="w-full h-full bg-indigo-600 dark:bg-indigo-400 rounded-full"></div>
        </div>
      </div>
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 group cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors">
        <span data-motion="badge" class="text-slate-500 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 text-sm font-semibold mb-3 block transition-colors">Chapter 02</span>
        <h3 class="text-slate-900 dark:text-white font-semibold mb-2">The Challenge</h3>
        <p class="text-slate-600 dark:text-neutral-400 text-sm">Obstacles that test the spirit and forge unbreakable bonds.</p>
        <div class="mt-4 w-full h-1 bg-slate-200 dark:bg-neutral-800 rounded-full overflow-hidden">
          <div class="w-0 group-hover:w-1/2 h-full bg-indigo-600 dark:bg-indigo-400 rounded-full transition-all duration-500"></div>
        </div>
      </div>
      <div data-motion="card" class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6 group cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors">
        <span data-motion="badge" class="text-slate-500 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 text-sm font-semibold mb-3 block transition-colors">Chapter 03</span>
        <h3 class="text-slate-900 dark:text-white font-semibold mb-2">The Triumph</h3>
        <p class="text-slate-600 dark:text-neutral-400 text-sm">Victory against all odds and the dawn of a new era.</p>
        <div class="mt-4 w-full h-1 bg-slate-200 dark:bg-neutral-800 rounded-full overflow-hidden">
          <div class="w-0 group-hover:w-1/2 h-full bg-indigo-600 dark:bg-indigo-400 rounded-full transition-all duration-500"></div>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 pt-10 border-t border-slate-200 dark:border-neutral-800">
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">4.9★</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Audience Rating</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">2.5M</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Views</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">12</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Awards</span>
      </div>
      <div data-motion="stat" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">148</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Minutes</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.