Daycare Center 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_education_platform_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 class="grid lg:grid-cols-2 gap-12 items-end">
        <div data-motion="hero">
          <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 mb-6">
            <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
            Learning Platform
          </span>
          <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-none">
            <span data-animate="heading">Learn</span><br>
            <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">Without Limits</span>
          </h1>
        </div>
        <div data-motion="card">
          <p class="text-xl text-slate-600 dark:text-neutral-400 leading-relaxed mb-6" data-animate="text">
            Access world-class courses from industry experts. Learn at your own pace with interactive lessons and hands-on projects.
          </p>
          <div class="flex flex-wrap gap-4">
            <a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
              Start Learning
            </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">
              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>
      <div class="grid lg:grid-cols-4 gap-5">
        <div class="lg:col-span-2 rounded-3xl overflow-hidden" data-motion="image">
          <img data-motion="image"
            src="https://images.unsplash.com/photo-1651590950033-3f7ca145b991?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjYXIlMjBhdXRvbW90aXZlJTIwdmVoaWNsZSUyMGRheWNhcmUlMjBjZW50ZXJ8ZW58MXwwfHx8MTc2OTMyMDY3Mnww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Students learning together"
            class="w-full h-72 object-cover"
          >
        </div>
        <div class="bg-indigo-50 dark:bg-indigo-950/30 rounded-3xl p-8 flex flex-col justify-center" data-motion="card">
          <span class="text-5xl font-bold text-indigo-600 dark:text-indigo-400 block mb-2">500+</span>
          <span class="text-slate-600 dark:text-neutral-400">Expert-led courses across 50+ categories</span>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-3xl p-6" data-motion="card">
          <div class="flex items-center gap-3 mb-4">
            <img data-motion="avatar" src="https://images.unsplash.com/photo-1624300634942-64499829477d?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjYXIlMjBhdXRvbW90aXZlJTIwdmVoaWNsZSUyMGRheWNhcmUlMjBjZW50ZXJ8ZW58MXwwfHx8MTc2OTMyMDY3Mnww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Instructor" class="w-12 h-12 rounded-full object-cover">
            <div>
              <p class="text-slate-900 dark:text-white font-semibold text-sm">Featured Course</p>
              <p class="text-slate-500 dark:text-neutral-400 text-xs">by John Smith</p>
            </div>
          </div>
          <h3 class="text-slate-900 dark:text-white font-semibold mb-2">Full-Stack Development</h3>
          <div class="flex items-center gap-2">
            <div class="flex text-indigo-400">
              <svg class="w-4 h-4" 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-sm text-slate-600 dark:text-neutral-400">4.9 (2.3k)</span>
          </div>
        </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">2M+</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Active Learners</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">95%</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Success Rate</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">150+</span>
          <span class="text-slate-500 dark:text-neutral-400 text-sm">Expert Instructors</span>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <div class="flex items-center gap-2">
            <div data-motion="icon" class="w-8 h-8 bg-indigo-100 dark:bg-indigo-900/40 rounded-full flex items-center justify-center">
              <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
              </svg>
            </div>
            <span class="text-slate-900 dark:text-white font-semibold text-sm">Certificate Included</span>
          </div>
        </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.