Individual Realtor 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_real_estate_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="grid lg:grid-cols-2 gap-8 lg:gap-16 items-end mb-12">
      <div data-motion="hero" class="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-700 dark:text-indigo-400 text-sm font-medium">
          <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span>
          #1 Investment Platform
        </span>
        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-slate-900 dark:text-white leading-[1.05]">
          <span data-animate="heading">Smart</span>
          <span data-animate="heading" class="text-indigo-600 dark:text-indigo-400"> Investing</span>
        </h1>
      </div>
      <div data-motion="card" class="space-y-4">
        <p data-animate="text" class="text-lg text-slate-600 dark:text-neutral-400">
          Access premium investment opportunities worldwide with our AI-powered platform. Build wealth with confidence through diversified portfolios.
        </p>
        <div class="flex flex-wrap gap-4">
          <a data-motion="button" href="#" class="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full transition-colors">
            Start Investing
            <svg class="w-4 h-4" 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>
          <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">
            Learn More
            <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-3 gap-5">
      <div data-motion="image" class="lg:col-span-2 rounded-3xl overflow-hidden aspect-video">
        <img data-motion="image" src="https://images.unsplash.com/photo-1726000127379-9ef47b86a5e4?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxyZWFsJTIwZXN0YXRlJTIwbHV4dXJ5JTIwaG9tZSUyMGluZGl2aWR1YWx8ZW58MXwwfHx8MTc2OTMxOTQzN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="Investment dashboard" class="w-full h-full object-cover">
      </div>
      <div data-motion="card" class="p-6 bg-indigo-50 dark:bg-indigo-950/30 rounded-3xl flex flex-col justify-between">
        <div>
          <p class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold mb-2">Active Community</p>
          <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">50K+ Investors</h3>
        </div>
        <div class="flex -space-x-2">
          <img data-motion="avatar" src="https://images.unsplash.com/photo-1724080447591-1022032d10ac?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxyZWFsJTIwZXN0YXRlJTIwbHV4dXJ5JTIwaG9tZSUyMGluZGl2aWR1YWx8ZW58MXwwfHx8MTc2OTMxOTQzN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" 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-1717167398882-15d1cefd22f6?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxyZWFsJTIwZXN0YXRlJTIwbHV4dXJ5JTIwaG9tZSUyMGluZGl2aWR1YWx8ZW58MXwwfHx8MTc2OTMxOTQzN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" 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-1591208854190-d08149f6ecd7?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw0fHxyZWFsJTIwZXN0YXRlJTIwbHV4dXJ5JTIwaG9tZSUyMGluZGl2aWR1YWx8ZW58MXwwfHx8MTc2OTMxOTQzN3ww&ixlib=rb-4.1.0&w=1200&auto=format&fit=crop&q=80" alt="User" 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">
            <span data-motion="badge" class="text-white text-xs font-semibold">+47K</span>
          </div>
        </div>
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl">
        <span class="text-3xl font-bold text-slate-900 dark:text-white block">$2.5B+</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Assets Managed</span>
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl">
        <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">18%</span>
        <span class="text-slate-500 dark:text-neutral-400 text-sm">Avg. Annual Return</span>
      </div>
      <div data-motion="card" class="p-6 bg-slate-50 dark:bg-neutral-900 rounded-2xl">
        <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">Global Markets</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.