Montessori 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_video_course_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-12">
      <div data-motion="hero" class="text-center max-w-3xl mx-auto space-y-6">
        <span data-motion="badge" class="inline-flex items-center gap-2 px-4 py-1.5 bg-indigo-100 dark:bg-indigo-900/40 rounded-full text-indigo-600 dark:text-indigo-400 text-sm font-medium">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          Learn from the Best
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight">
          <span data-animate="heading">Unlock Your</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Creative</span>
          <span data-animate="heading"> Potential</span>
        </h1>
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400 leading-relaxed">
          Master in-demand skills with expert-led video courses. From design to development, transform your career with hands-on learning experiences.
        </p>
        <div class="flex flex-wrap items-center justify-center gap-4 pt-2">
          <a data-motion="button" href="#" class="px-8 py-3.5 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors">
            Start Learning Free
          </a>
          <a data-motion="button" href="#" class="px-8 py-3.5 bg-slate-100 dark:bg-neutral-800 hover:bg-slate-200 dark:hover:bg-neutral-700 text-slate-900 dark:text-white font-semibold rounded-full transition-colors">
            View All Courses
          </a>
        </div>
      </div>
      <div class="grid lg:grid-cols-3 gap-5">
        <div data-motion="card" class="lg:col-span-2 relative rounded-3xl overflow-hidden h-80 lg:h-96 group">
          <img data-motion="image" src="https://images.unsplash.com/photo-1567398724206-be8c8f0f8e41?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwbW9udGVzc29yaXxlbnwxfDB8fHwxNzY5MzIwMDk0fDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Students learning together" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
          <div class="absolute inset-0 bg-linear-to-t from-slate-900/80 via-slate-900/30 to-transparent"></div>
          <button data-motion="play-button" type="button" class="absolute inset-0 m-auto w-20 h-20 rounded-full bg-white/20 backdrop-blur-xs border border-white/40 flex items-center justify-center hover:bg-white/30 hover:scale-110 transition-all duration-300" aria-label="Play video">
            <svg class="w-8 h-8 text-white ml-1" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </button>
          <div class="absolute bottom-6 left-6 right-6">
            <span data-motion="badge" class="inline-block px-3 py-1 bg-indigo-600 text-white text-xs font-medium rounded-full mb-3">Featured Course</span>
            <h3 class="text-xl sm:text-2xl font-bold text-white mb-1">Complete Web Development Bootcamp</h3>
            <p class="text-white/80 text-sm">12 hours of content • 45 lessons</p>
          </div>
        </div>
        <div class="flex flex-col gap-5">
          <div data-motion="card" class="flex-1 p-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl flex flex-col justify-center">
            <span class="text-4xl font-bold text-indigo-600 dark:text-indigo-400 block mb-1">50K+</span>
            <span class="text-slate-600 dark:text-neutral-400">Active Students</span>
            <div class="flex -space-x-2 mt-4">
              <img data-motion="avatar" class="w-8 h-8 rounded-full border-2 border-indigo-50 dark:border-indigo-900" src="https://images.unsplash.com/photo-1566930000176-fdb48dee82d9?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwbW9udGVzc29yaXxlbnwxfDB8fHwxNzY5MzIwMDk0fDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Student">
              <img data-motion="avatar" class="w-8 h-8 rounded-full border-2 border-indigo-50 dark:border-indigo-900" src="https://images.unsplash.com/photo-1557734864-c78b6dfef1b1?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwbW9udGVzc29yaXxlbnwxfDB8fHwxNzY5MzIwMDk0fDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Student">
              <img data-motion="avatar" class="w-8 h-8 rounded-full border-2 border-indigo-50 dark:border-indigo-900" src="https://images.unsplash.com/photo-1625111381887-458fce74a923?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwbW9udGVzc29yaXxlbnwxfDB8fHwxNzY5MzIwMDk0fDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Student">
              <span class="w-8 h-8 rounded-full border-2 border-indigo-50 dark:border-indigo-900 bg-indigo-600 text-white text-xs font-medium flex items-center justify-center">+</span>
            </div>
          </div>
          <div data-motion="card" class="flex-1 p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl flex flex-col justify-center">
            <div class="flex items-center gap-1 mb-1">
              <span class="text-4xl font-bold text-slate-900 dark:text-white">4.9</span>
              <svg class="w-6 h-6 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
              </svg>
            </div>
            <span class="text-slate-600 dark:text-neutral-400">Average Rating</span>
            <p class="text-sm text-slate-500 dark:text-neutral-500 mt-2">Based on 12,000+ reviews</p>
          </div>
          <div data-motion="card" class="flex-1 p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl flex flex-col justify-center">
            <span class="text-4xl font-bold text-slate-900 dark:text-white block mb-1">200+</span>
            <span class="text-slate-600 dark:text-neutral-400">Expert Courses</span>
            <p class="text-sm text-slate-500 dark:text-neutral-500 mt-2">New courses added weekly</p>
          </div>
        </div>
      </div>
      <div data-motion="categories" class="flex flex-wrap justify-center gap-3">
        <span data-motion="badge" class="px-4 py-2 bg-slate-100 dark:bg-neutral-800 rounded-full text-sm text-slate-700 dark:text-neutral-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer">Web Development</span>
        <span data-motion="badge" class="px-4 py-2 bg-slate-100 dark:bg-neutral-800 rounded-full text-sm text-slate-700 dark:text-neutral-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer">UI/UX Design</span>
        <span data-motion="badge" class="px-4 py-2 bg-slate-100 dark:bg-neutral-800 rounded-full text-sm text-slate-700 dark:text-neutral-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer">Data Science</span>
        <span data-motion="badge" class="px-4 py-2 bg-slate-100 dark:bg-neutral-800 rounded-full text-sm text-slate-700 dark:text-neutral-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer">Mobile Apps</span>
        <span data-motion="badge" class="px-4 py-2 bg-slate-100 dark:bg-neutral-800 rounded-full text-sm text-slate-700 dark:text-neutral-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors cursor-pointer">Marketing</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.