Charter School 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_learning_hub_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-3 gap-5">
      <div class="lg:col-span-2 bg-indigo-600 dark:bg-indigo-700 rounded-3xl p-8 lg:p-12" data-motion="hero">
        <span data-motion="badge" class="text-indigo-200 text-sm font-semibold tracking-wide uppercase mb-6 block">Digital Academy</span>
        <h1 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-6">
          <span data-animate="heading">Master Skills</span><br>
          <span data-animate="heading">At Your Pace</span>
        </h1>
        <p class="text-lg text-indigo-100 mb-8 max-w-xl" data-animate="text">
          Access world-class courses from industry experts. Build practical skills with hands-on projects and earn certificates that matter.
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="#" data-motion="button" class="px-6 py-3 bg-white hover:bg-slate-100 transition-colors rounded-full text-indigo-600 font-semibold">
            Start Learning Free
          </a>
          <a href="#" data-motion="button" class="inline-flex items-center gap-2 text-white font-semibold hover:gap-3 transition-all duration-300">
            Browse Courses
            <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 class="lg:col-span-1 rounded-3xl overflow-hidden" data-motion="image">
        <img data-motion="image"
          src="https://images.unsplash.com/photo-1719159381916-062fa9f435a6?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwY2hhcnRlcnxlbnwxfDB8fHwxNzY5MzIwMDkyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
          alt="Students learning"
          class="w-full h-full min-h-[300px] object-cover"
        >
      </div>
      <div class="bg-indigo-50 dark:bg-indigo-950/30 rounded-2xl p-6" data-motion="card">
        <span class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 block mb-1">250K+</span>
        <span class="text-slate-600 dark:text-neutral-400 text-sm">Active learners from 120+ countries</span>
      </div>
      <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" 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">Expert-led Courses</span>
      </div>
      <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
        <div class="flex items-center gap-3 mb-2">
          <div class="flex -space-x-2">
            <img data-motion="avatar" src="https://images.unsplash.com/photo-1660351174962-e2a1fbb9af09?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwY2hhcnRlcnxlbnwxfDB8fHwxNzY5MzIwMDkyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Student" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <img data-motion="avatar" src="https://images.unsplash.com/photo-1709290749293-c6152a187b14?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwY2hhcnRlcnxlbnwxfDB8fHwxNzY5MzIwMDkyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Student" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <img data-motion="avatar" src="https://images.unsplash.com/photo-1663247455965-b63fa4048b29?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwY2hhcnRlcnxlbnwxfDB8fHwxNzY5MzIwMDkyfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Student" class="w-8 h-8 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
          </div>
        </div>
        <span class="text-slate-900 dark:text-white font-semibold text-sm block">5000+ enrolled this week</span>
      </div>
      <div class="lg:col-span-3 text-center pt-6" data-motion="social-proof">
        <p class="text-slate-500 dark:text-neutral-400 text-sm mb-4">Trusted by leading companies</p>
        <div class="flex flex-wrap justify-center items-center gap-8">
          <span class="text-slate-300 dark:text-neutral-700 font-bold text-xl">Spotify</span>
          <span class="text-slate-300 dark:text-neutral-700 font-bold text-xl">Slack</span>
          <span class="text-slate-300 dark:text-neutral-700 font-bold text-xl">Google</span>
          <span class="text-slate-300 dark:text-neutral-700 font-bold text-xl">Airbnb</span>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
    .carousel-track { display: flex; transition: transform 0.5s ease-out; }
  </style>

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.