Event 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_music_streaming_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="text-center max-w-3xl mx-auto mb-12">
      <div data-motion="hero" class="space-y-6">
        <span data-motion="badge" class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Music Streaming
        </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">Discover Your</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Sound</span>
        </h1>
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400">
          Stream unlimited music from artists worldwide. Create playlists, discover new genres, and enjoy crystal-clear audio wherever you go.
        </p>
        <div class="flex flex-wrap justify-center gap-4 pt-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 Listening
            <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">
            See 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>
    </div>
    <div class="relative">
      <div class="grid grid-cols-4 gap-4">
        <div data-motion="image" class="col-span-2 rounded-3xl overflow-hidden aspect-4/3">
          <img data-motion="image" src="https://images.unsplash.com/photo-1759477274116-e3cb02d2b9d8?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxldmVudCUyMGNlbGVicmF0aW9uJTIwcGFydHklMjBwbGFubmVyfGVufDF8MHx8fDE3NjkzMjAyMDR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Concert crowd" class="w-full h-full object-cover">
        </div>
        <div data-motion="image" class="rounded-3xl overflow-hidden aspect-square">
          <img data-motion="image" src="https://images.unsplash.com/photo-1766043370445-b408e02292c7?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxldmVudCUyMGNlbGVicmF0aW9uJTIwcGFydHklMjBwbGFubmVyfGVufDF8MHx8fDE3NjkzMjAyMDR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Headphones" class="w-full h-full object-cover">
        </div>
        <div data-motion="image" class="rounded-3xl overflow-hidden aspect-square">
          <img data-motion="image" src="https://images.unsplash.com/photo-1759646827844-bbbdbfd0ada2?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxldmVudCUyMGNlbGVicmF0aW9uJTIwcGFydHklMjBwbGFubmVyfGVufDF8MHx8fDE3NjkzMjAyMDR8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Guitar player" class="w-full h-full object-cover">
        </div>
      </div>
      <div data-motion="card" class="absolute bottom-6 left-6 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-xs rounded-2xl p-4 max-w-xs">
        <div class="flex items-center gap-3">
          <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center shrink-0">
            <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
            </svg>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm font-semibold text-slate-900 dark:text-white truncate">Summer Vibes</p>
            <p class="text-xs text-slate-500 dark:text-neutral-400 truncate">Now Playing</p>
          </div>
          <button data-motion="button" type="button" aria-label="Play" class="w-10 h-10 bg-indigo-600 hover:bg-indigo-700 rounded-full flex items-center justify-center text-white transition-colors">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
          </button>
        </div>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12 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">80M+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Tracks</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">50M+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Active Users</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">App Rating</span>
      </div>
      <div data-motion="card" class="text-center">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">180+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Countries</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.