Environmental Nonprofit 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_event_registration_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="flex flex-col gap-16">
      <div class="text-center max-w-3xl mx-auto" 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">March 15-16, 2026</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">Global Tech</span><br>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">Summit 2026</span>
        </h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Connect with industry leaders, discover breakthrough innovations, and shape the future of technology at our flagship annual conference.
        </p>
      </div>
      <div class="grid lg:grid-cols-3 gap-5">
        <div class="lg:col-span-1 rounded-3xl overflow-hidden" data-motion="image">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1758599669406-d5179ccefcb9?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxub25wcm9maXQlMjBjaGFyaXR5JTIwdm9sdW50ZWVyJTIwZW52aXJvbm1lbnRhbHxlbnwxfDB8fHwxNzY5MzIwMjUyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Tech conference"
            class="w-full h-full min-h-[300px] object-cover"
          >
        </div>
        <div class="lg:col-span-2 bg-indigo-50 dark:bg-indigo-950/20 rounded-3xl p-8" data-motion="card">
          <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-6">Reserve Your Spot</h4>
          <form class="grid sm:grid-cols-2 gap-4">
            <div>
              <input data-motion="input" type="text" class="w-full px-5 py-3 rounded-full border border-slate-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-hidden focus:border-indigo-500 transition-colors" placeholder="Full Name">
            </div>
            <div>
              <input data-motion="input" type="email" class="w-full px-5 py-3 rounded-full border border-slate-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-hidden focus:border-indigo-500 transition-colors" placeholder="Email Address">
            </div>
            <div>
              <input data-motion="input" type="text" class="w-full px-5 py-3 rounded-full border border-slate-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-hidden focus:border-indigo-500 transition-colors" placeholder="Company">
            </div>
            <div>
              <button type="submit" data-motion="button" class="w-full px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
                Register Free
              </button>
            </div>
          </form>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <span class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 block mb-1">50+</span>
          <span class="text-slate-600 dark:text-neutral-400">World-class Speakers</span>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <span class="text-4xl font-bold text-slate-900 dark:text-white block mb-1">3K+</span>
          <span class="text-slate-600 dark:text-neutral-400">Expected Attendees</span>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <span class="text-4xl font-bold text-slate-900 dark:text-white block mb-1">2 Days</span>
          <span class="text-slate-600 dark:text-neutral-400">Of Immersive Learning</span>
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-center gap-8" data-motion="social-proof">
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
          </svg>
          <span class="text-sm font-medium">San Francisco, CA</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
          </svg>
          <span class="text-sm font-medium">Live Streaming Available</span>
        </div>
        <div class="flex items-center gap-2 text-slate-600 dark:text-neutral-400">
          <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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
          </svg>
          <span class="text-sm font-medium">Certificate Included</span>
        </div>
      </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.