Home
UI-Templates
Real Estate Website • Hero Section

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 CSS v3. It is responsive. similar terms for this example is Front page

Header Hero Landing Page

Author UI-Templates

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

Author:
Prajwal Hallale

3 years ago

9k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

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

Author:
Junclarkaizen Pagu

2 years ago

11.5k
Hero

Author:
Aman kumar

1 year ago

6.7k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4k
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

Author:
Amit Pachange

1 year ago

13.7k
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

Author:
Sahil Sasapara

1 year ago

4.5k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.1k
Hero Beer

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components