Real Estate Website • Hero Section

polished, professional Hero section

This tailwind example is contributed by UI-Templates, on 15-Oct-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is Front page

Header Hero Landing Page

Author UI-Templates

Tailwind v3.4 1.4k 2

Fork Fullscreen

<header class="relative w-full h-screen overflow-hidden">
    
    <img
      src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1920&q=80"
      alt="Luxury Home"
      class="w-full h-full object-cover brightness-75">

<nav class="absolute top-0 left-0 w-full z-20 flex items-center justify-between px-8 py-5 bg-white/0">

<ul class="hidden md:flex items-center gap-6 text-white font-normal text-sm tracking-wide">
    <li><a href="#" class="hover:text-lime-300 transition">About Us</a></li>
    <li><a href="#" class="hover:text-lime-300 transition">Listing</a></li>
    <li><a href="#" class="hover:text-lime-300 transition">Features</a></li>
    <li><a href="#" class="hover:text-lime-300 transition">Blogs</a></li>
  </ul>

<div class="absolute left-1/2 transform -translate-x-1/2">
    <h1 class="text-2xl font-bold text-white tracking-wider uppercase">Real-XT</h1>
  </div>

<div>
    <button
      class="flex flex-row gap-1 bg-lime-400 text-gray-900 px-3 py-2 rounded-lg font-semibold text-xs hover:bg-lime-500 transition">
      Add Listing
      <span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
          class="size-4">
          <path fill-rule="evenodd"
            d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm.75-10.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"
            clip-rule="evenodd" />
        </svg>
      </span>
    </button>
  </div>

<button class="md:hidden text-white">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24"
      stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="M4 6h16M4 12h16M4 18h16" />
    </svg>
  </button>
</nav>

<div class="absolute inset-0 flex flex-col justify-center items-center text-center text-white px-6">
      <h2 class="text-4xl md:text-6xl font-bold mb-4 drop-shadow-lg">Find Your Perfect Home</h2>
      <p class="text-lg md:text-xl opacity-90 mb-8">Discover properties tailored to your lifestyle</p>
      <button class="bg-lime-400 text-gray-900 px-6 py-3 rounded-lg font-semibold hover:bg-lime-500 transition">
        Explore Listings
      </button>
    </div>
  </header>

<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="absolute bottom-4 right-4 flex items-center gap-2 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240" class="w-5 h-5 fill-white">
    <path d="M104.4 104.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zm36.2 0c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
    <path d="M189.5 20h-134C34.3 20 20 34.3 20 52.5v135c0 18.2 14.3 32.5 32.5 32.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 19V52.5c-.1-18.2-14.4-32.5-32.6-32.5zM163 155s-4.6-5.5-8.4-10.3c16.7-4.7 23.1-15.1 23.1-15.1-5.2 3.4-10.1 5.8-14.5 7.4-6.3 2.7-12.4 4.4-18.3 5.4-12.1 2.3-23.2 1.7-32.8-.1-7.2-1.4-13.5-3.4-18.7-5.4-2.9-1.1-6-2.4-9.1-4.1-.4-.2-.8-.3-1.1-.5-.3-.1-.4-.2-.6-.3-2.7-1.5-4.1-2.5-4.1-2.5s6.1 10.2 22.2 15c-3.8 4.8-8.5 10.6-8.5 10.6-28.1-.9-38.8-19.4-38.8-19.4 0-41.1 18.4-74.5 18.4-74.5 18.4-13.8 35.9-13.4 35.9-13.4l1.3 1.6c-23 6.6-33.7 16.5-33.7 16.5s2.8-1.5 7.5-3.5c13.6-5.9 24.4-7.5 28.9-7.9.7-.1 1.3-.2 2-.2 7.1-.9 15.2-1.2 23.5-.2 11 1.3 22.8 4.5 34.9 11.1 0 0-10.1-9.6-31.9-16.2l1.8-2.1s17.5-.4 35.9 13.4c0 0 18.4 33.4 18.4 74.5 0 .1-10.8 18.6-38.9 19.5z"/>
  </svg>
</a>

</body>

Related Examples

Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
A Fullscreen Hero Section

Brandon D

4 years ago

23.4k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.3k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.1k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.7k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.7k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.4k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.8k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.5k