Corporate 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_podcast_studio_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 items-center">
      <div data-motion="hero" class="lg:col-span-8 space-y-8">
        <div class="flex items-center gap-3">
          <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-2 h-2 bg-indigo-500 rounded-full animate-pulse"></span>
            Now Recording
          </span>
        </div>
        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-[1.05]">
          <span data-animate="heading">Launch Your</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Podcast</span>
          <span data-animate="heading"> Today</span>
        </h1>
        <p data-animate="text" class="text-xl text-slate-600 dark:text-neutral-400 max-w-2xl">
          Professional recording studios, expert editing, and distribution to all major platforms. Start your audio journey with us.
        </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">
            Book a Session
            <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">
            View Pricing
            <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 class="flex flex-wrap gap-8 pt-4">
          <div data-motion="card">
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Episodes Produced</span>
          </div>
          <div data-motion="card">
            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">50+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Active Shows</span>
          </div>
          <div data-motion="card">
            <span class="text-3xl font-bold text-slate-900 dark:text-white block">10M+</span>
            <span class="text-slate-500 dark:text-neutral-400 text-sm">Downloads</span>
          </div>
        </div>
      </div>
      <div class="lg:col-span-4">
        <div data-motion="image" class="relative rounded-3xl overflow-hidden aspect-3/4">
          <img data-motion="image" src="https://images.unsplash.com/photo-1661697522391-699652d67ad3?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxldmVudCUyMGNlbGVicmF0aW9uJTIwcGFydHklMjBjb3Jwb3JhdGUlMjBwbGFubmVyfGVufDF8MHx8fDE3NjkzMjAyMDh8MA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Podcast microphone" class="w-full h-full object-cover">
          <div class="absolute bottom-4 left-4 right-4 p-4 bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xs rounded-xl">
            <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="currentColor" viewBox="0 0 24 24">
                  <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"/>
                  <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
                </svg>
              </div>
              <div>
                <p class="text-sm font-semibold text-slate-900 dark:text-white">Studio A</p>
                <p class="text-xs text-slate-500 dark:text-neutral-400">Available Now</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-motion="social-proof" class="mt-16 text-center">
      <p class="text-slate-500 dark:text-neutral-400 text-sm mb-6">Distributed to all major platforms</p>
      <div class="flex flex-wrap justify-center items-center gap-10 opacity-50">
        <span class="text-lg font-bold text-slate-400 dark:text-neutral-600">Spotify</span>
        <span class="text-lg font-bold text-slate-400 dark:text-neutral-600">Apple Podcasts</span>
        <span class="text-lg font-bold text-slate-400 dark:text-neutral-600">Google</span>
        <span class="text-lg font-bold text-slate-400 dark:text-neutral-600">Amazon</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.