International 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_developer_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-16">
      <div class="text-center max-w-3xl mx-auto" 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>
          Developer Platform
        </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">Ship Code</span><br>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400">Not Infrastructure</span>
        </h1>
        <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text">
          Build production-ready applications in hours. Our platform handles the complexity so you can focus on what matters most—your code.
        </p>
        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
          <input
            data-motion="input"
            type="email"
            placeholder="[email protected]"
            class="w-full sm:w-auto px-6 py-3 rounded-full border border-slate-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-neutral-500 focus:outline-hidden focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors"
          >
          <button type="button" data-motion="button" class="w-full sm:w-auto px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold">
            Start Building Free
          </button>
        </div>
      </div>
      <div class="grid lg:grid-cols-3 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-1570616969692-54d6ba3d0397?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwaW50ZXJuYXRpb25hbHxlbnwxfDB8fHwxNzY5MzIwMTAwfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80"
            alt="Code editor interface"
            class="w-full h-72 lg:h-80 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">50K+</span>
          <span class="text-slate-600 dark:text-neutral-400 text-lg">Developers building with us</span>
          <div class="flex -space-x-2 mt-6">
            <img data-motion="avatar" src="https://images.unsplash.com/photo-1706645740995-d3ab4b91f4fa?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwaW50ZXJuYXRpb25hbHxlbnwxfDB8fHwxNzY5MzIwMTAwfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Developer" class="w-10 h-10 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <img data-motion="avatar" src="https://images.unsplash.com/photo-1727473704473-e4fe94b45b96?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwaW50ZXJuYXRpb25hbHxlbnwxfDB8fHwxNzY5MzIwMTAwfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Developer" class="w-10 h-10 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <img data-motion="avatar" src="https://images.unsplash.com/photo-1727553957752-bca64c93249e?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxzY2hvb2wlMjBzdHVkZW50cyUyMGxlYXJuaW5nJTIwaW50ZXJuYXRpb25hbHxlbnwxfDB8fHwxNzY5MzIwMTAwfDA&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Developer" class="w-10 h-10 rounded-full border-2 border-white dark:border-neutral-900 object-cover">
            <div class="w-10 h-10 rounded-full border-2 border-white dark:border-neutral-900 bg-indigo-600 flex items-center justify-center text-white text-xs font-semibold">+47K</div>
          </div>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <div data-motion="icon" class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 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="M13 10V3L4 14h7v7l9-11h-7z"/>
            </svg>
          </div>
          <h3 class="text-slate-900 dark:text-white font-semibold mb-2">Lightning Fast</h3>
          <p class="text-slate-500 dark:text-neutral-400 text-sm">Deploy in seconds with zero configuration</p>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <div data-motion="icon" class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 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>
          </div>
          <h3 class="text-slate-900 dark:text-white font-semibold mb-2">Enterprise Security</h3>
          <p class="text-slate-500 dark:text-neutral-400 text-sm">SOC 2 compliant with end-to-end encryption</p>
        </div>
        <div class="bg-slate-50 dark:bg-neutral-900 rounded-2xl p-6" data-motion="card">
          <div data-motion="icon" class="w-12 h-12 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4">
            <svg class="w-6 h-6 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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
            </svg>
          </div>
          <h3 class="text-slate-900 dark:text-white font-semibold mb-2">Auto Scaling</h3>
          <p class="text-slate-500 dark:text-neutral-400 text-sm">Handle millions of requests effortlessly</p>
        </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.