Create A Real Estate Website Using React and Tailwind CSS
Last Updated :
23 Jul, 2025
A Real Estate Website built with React JS and Tailwind CSS is a modern and responsive web application that is designed to showcase real estate listings. It typically includes features such as OnSale property, a Features section, and a Contact Us section.
The website is created using React JS, which is a popular JavaScript library used for building user interfaces, and Tailwind CSS, which is a utility-first CSS framework that ensures a responsive and visually appealing design.
Output Preview: Let us have a look at how the final output will look like.
Prerequisites:
Steps to Create React Application & Install required modules:
Step 1: Set up the project using the command
npx create-react-app my-app
Step 2: After creating the application move to the folder using the command
cd my-app
Step 3: Install the required dependencies using the command
npm install -D tailwindcss react-scroll
Step 4: Create the tailwind config file using the command
npx tailwindcss init
Step 5: Rewrite the tailwind.config.js file as folllows
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@headlessui/react": "^1.7.15",
"@heroicons/react": "^2.0.18",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.9",
"web-vitals": "^2.1.4"
}
Example: Implementation to design a real estate website.
CSS
// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap');
@layer base {
body {
@apply font-[Raleway];
}
li {
@apply px-4;
@apply cursor-pointer
}
}
// App.js
import Navbar from "./Components/Navbar"
import Footer from "./Components/Footer";
import Home from "./Components/Home";
import Features from "./Components/Feature";
import Sales from "./Components/Onsale";
import About from "./Components/About";
import "./index.css";
function App() {
return (
<div>
<Navbar />
<Home />
<About />
<Features />
<Sales />
<Footer />
</div>
);
}
export default App;
// Navbar.js
import React, { useState, useEffect } from "react";
import { Link } from "react-scroll";
import "../index.css";
const Navbar = () => {
const [showMenu, setShowMenu] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const handleMenuClick = () => {
setShowMenu(!showMenu);
};
useEffect(() => {
const handleScroll = () => {
if (window.scrollY >= 33) {
setIsScrolled(true);
} else {
setIsScrolled(false);
}
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
return (
<div
className={`fixed top-0 z-50 w-full h-[70px]
flex justify-between items-center px-4
text-black ${isScrolled ? "bg-white" : "bg-transparent"
}`}
>
<div className="text-4xl cursor-pointer
inline-flex items-center text-amber-800">
<Link to="home" smooth={true} duration={500}>
Geeks Real Estate
</Link>
</div>
<div className="md:hidden" onClick={handleMenuClick}>
{showMenu ? (
<svg
className="h-6 w-6 text-black cursor-pointer"
xmlns="https://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M14.95 5.879l-1.414-1.414L10 8.586 6.464 5.05
5.05 6.464 8.586 10l-3.536 3.536 1.414 1.414L10
11.414l3.536 3.536 1.414-1.414L11.414 10l3.536-3.536z"
clipRule="evenodd"
/>
</svg>
) : (
<svg
className="h-6 w-6 text-black cursor-pointer"
xmlns="https://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3
10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 16a1
1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clipRule="evenodd"
/>
</svg>
)}
</div>
<ul className="hidden md:flex">
<li>
<Link to="home" smooth={true} duration={500}>
Home
</Link>
</li>
<li>
<Link to="about" smooth={true} duration={500}>
About Us
</Link>
</li>
<li>
<Link to="feature" smooth={true} duration={500}>
Our Features
</Link>
</li>
<li>
<Link to="sale" smooth={true} duration={500}>
On Sale
</Link>
</li>
</ul>
<div className="hidden md:flex">
<button className="px-4 py-2 bg-amber-800 text-white
rounded-md hover:bg-amber-900
hover:text-white mx-2">
<Link to="contact" smooth={true} duration={500}>
Contact Us
</Link>
</button>
</div>
<div
className={`${showMenu ? "flex" : "hidden"
} md:hidden flex flex-col bg-amber-800 text-white
w-full absolute top-16 left-0 z-10`} >
<Link
to="home"
smooth={true}
duration={500}
className="p-4 hover:bg-gray-700 cursor-pointer"
onClick={handleMenuClick} >
Home
</Link>
<Link
to="about"
smooth={true}
duration={500}
className="p-4 hover:bg-gray-700 cursor-pointer"
onClick={handleMenuClick} >
About Us
</Link>
<Link
to="feature"
smooth={true}
duration={500}
className="p-4 hover:bg-gray-700 cursor-pointer"
onClick={handleMenuClick} >
Our Features
</Link>
<Link
to="sale"
smooth={true}
duration={500}
className="p-4 hover:bg-gray-700 cursor-pointer"
onClick={handleMenuClick} >
On Sale
</Link>
<Link
to="contact"
smooth={true}
duration={500}
className="p-4 hover:bg-gray-700 cursor-pointer"
onClick={handleMenuClick} >
Contact Us
</Link>
</div>
</div>
);
};
export default Navbar;
// Home.js
import React from "react";
const HomePage = () => {
return (
<div id="home"
className="w-full min-h-screen p-8 flex
items-center bg-gradient-to-b
from-white to-gray-400">
<div className="max-w-7xl mx-auto md:flex
md:flex-row-reverse md:items-center">
<div className="md:w-1/2 md:pr-8 my-11">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301104957/skyscraper.png"
alt="Home"
className="w-full h-auto object-cover"
/>
</div>
<div className="md:w-1/2 md:pl-8">
<div className="text-center md:text-left">
<h1 className="text-4xl font-bold text-gray-800 mb-6">
Find Your <span className="text-amber-800">
Dream Home
</span>
</h1>
<p className="text-lg text-gray-700 mb-8">
Welcome to our real estate agency,
where finding your dream home is
our top priority. Our team of experienced
agents is dedicated to providing exceptional
service and helping you navigate the complex
process of buying or selling a property
</p>
<div className="text-center md:text-left">
<form className="flex flex-col md:flex-row gap-4">
<input
id="email"
name="email"
type="email"
autoComplete="email"
placeholder="Your Email"
className="px-4 py-2 bg-white
rounded-full shadow-lg
focus:outline-none"
/>
<button className="px-6 py-3 bg-amber-800
text-white rounded-full
shadow-lg
hover:bg-amber-900">
Get Started
</button>
</form>
</div>
</div>
</div>
</div>
</div>
);
};
export default HomePage;
// About.js
import React from "react";
const AboutUs = () => {
return (
<div id="about"
className="flex flex-col md:flex-row
w-full h-screen bg-amber-800">
<div className="w-full md:w-1/2 p-0 md:p-8
flex items-center justify-center ">
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301104749/mansion-(1).png"
alt="About Us"
className="w-full h-auto object-cover"
/>
</div>
<div className="w-full md:w-1/2 p-4 md:p-8
bg-gray-100 flex items-center justify-center">
<div className="text-center md:text-left">
<h2 className="text-3xl md:text-5xl
font-bold text-amber-800 mb-4">
About Us
</h2>
<p className="text-lg md:text-xl text-gray-700 mb-8">
Welcome to my premier real estate agency,
where our mission is to provide exceptional
service and expertise to help our clients
achieve their real estate goals. With years
of experience in the industry, our team of
dedicated professionals has built a
reputation for excellence and integrity.
<br />
<br />
We are committed to staying up-to-date
with the latest trends and technologies
in the real estate market, and we use our
knowledge and expertise to guide our clients
through the buying and selling
process with confidence.
</p>
</div>
</div>
</div>
);
};
export default AboutUs;
// Feature.js
import React from "react";
const Features = () => {
return (
<div id="feature"
className="w-full min-h-screen p-2 flex
items-center bg-gradient-to-b
from-white to-gray-400">
<div className="max-w-7xl mx-auto py-12
px-4 sm:px-6 lg:py-16 lg:px-8">
<h2 className="text-4xl font-bold text-gray-800 mb-6">Feature
<span className="text-amber-800">Properties</span>
</h2>
<p className="text-lg text-gray-700 mb-8">
Here are some of our featured properties:
</p>
<div className="grid grid-cols-1 sm:grid-cols-2
md:grid-cols-3 gap-8">
<div className='shadow-md shadow-[#040c16]
hover:scale-110 duration-500'>
<div className="bg-white rounded-lg shadow-lg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301103810/h3.png"
alt="Property"
className="w-full max-h-64 object-cover
rounded-t-lg h-1/3 md:h-64" />
<div className="py-6 px-4">
<h3 className="text-lg font-medium
text-gray-900">
123 Main St</h3>
<p className="text-sm text-gray-500">
3 bd | 2 ba | 1,500 sqft
</p>
<p className="text-lg font-bold
text-gray-700 mt-4">
$500,000
</p>
<button className="mt-6 px-4 py-2 bg-amber-800
text-white rounded-md
hover:bg-amber-700">
View Details
</button>
</div>
</div>
</div>
<div className='shadow-md shadow-[#040c16]
hover:scale-110 duration-500'>
<div className="bg-white rounded-lg shadow-lg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301103810/h2.png"
alt="Property"
className="w-full max-h-64 object-cover
rounded-t-lg h-1/3 md:h-64" />
<div className="py-6 px-4">
<h3 className="text-lg font-medium
text-gray-900">
456 Oak St
</h3>
<p className="text-sm text-gray-500">
4 bd | 3 ba | 2,000 sqft
</p>
<p className="text-lg font-bold
text-gray-700 mt-4">
$750,000
</p>
<button className="mt-6 px-4 py-2
bg-amber-800 text-white
rounded-md
hover:bg-amber-700">
View Details
</button>
</div>
</div>
</div>
<div className='shadow-md shadow-[#040c16]
hover:scale-110 duration-500'>
<div className="bg-white rounded-lg shadow-lg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301103811/h1.png"
alt="Property"
className="max-h-64 object-cover
rounded-t-lg h-1/3 md:h-64" />
<div className="py-6 px-4">
<h3 className="text-lg font-medium
text-gray-900">
789 Maple Ave
</h3>
<p className="text-sm text-gray-500">
2 bd | 1 ba | 1,000 sqft
</p>
<p className="text-lg font-bold
text-gray-700 mt-4">
$300,000
</p>
<button className="mt-6 px-4 py-2
bg-amber-800 text-white
rounded-md
hover:bg-amber-700">
View Details
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Features;
// Onsale.js
import React from "react";
const SaleProperties = () => {
return (
<div id="sale"
className="w-full min-h-screen p-2
flex items-center bg-gray-100">
<div className="max-w-7xl mx-auto py-12
px-4 sm:px-6 lg:py-16 lg:px-8">
<h2 className="text-4xl font-bold text-gray-800 mb-6">
On Sale <span className="text-amber-800">Properties</span>
</h2>
<p className="text-lg text-gray-700 mb-8">
We offer a wide selection of on-sale
properties that cater to different
preferences and budgets. Here are
some of our featured properties:
</p>
<div className="grid grid-cols-1 sm:grid-cols-2
md:grid-cols-3 gap-8">
<div className="hover:shadow-md hover:shadow-[#040c16]">
<div className="bg-white rounded-lg shadow-lg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301104543/house-(1).png"
alt="Property"
className="w-full max-h-64 object-cover
rounded-t-lg h-1/3 md:h-64" />
<div className="py-6 px-4">
<h3 className="text-lg font-medium text-gray-900">
123 Main St
</h3>
<p className="text-sm text-gray-500">
3 bd | 2 ba | 1,500 sqft
</p>
<p class="text-lg font-bold text-gray-700 mt-4">
<del>$500,000</del> On Sale Now: $250,000
</p>
<button className="mt-6 px-4 py-2 bg-amber-800
text-white rounded-md hover:bg-amber-700">
View Details
</button>
</div>
</div>
</div>
<div className="hover:shadow-md hover:shadow-[#040c16]">
<div className="bg-white rounded-lg shadow-lg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301104545/mansion.png" alt="Property"
className="w-full max-h-64 object-cover
rounded-t-lg h-1/3 md:h-64" />
<div className="py-6 px-4">
<h3 className="text-lg font-medium
text-gray-900">456 Oak St</h3>
<p className="text-sm text-gray-500">
4 bd | 3 ba | 2,000 sqft
</p>
<p class="text-lg font-bold text-gray-700 mt-4">
<del>$750,000</del> On Sale Now: $500,000
</p>
<button className="mt-6 px-4 py-2 bg-amber-800
text-white rounded-md hover:bg-amber-700">
View Details
</button>
</div>
</div>
</div>
<div className="hover:shadow-md hover:shadow-[#040c16]">
<div className="bg-white rounded-lg shadow-lg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240301104546/house.png" alt="Property"
className="w-full max-h-64 object-cover
rounded-t-lg h-1/3 md:h-64" />
<div className="py-6 px-4">
<h3 className="text-lg font-medium
text-gray-900">789 Maple Ave</h3>
<p className="text-sm text-gray-500">
2 bd | 1 ba | 1,000 sqft
</p>
<p class="text-lg font-bold text-gray-700 mt-4">
<del>$300,000</del> On Sale Now: $200,000
</p>
<button className="mt-6 px-4 py-2 bg-amber-800
text-white rounded-md hover:bg-amber-700">
View Details
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default SaleProperties;
// Footer.js
import React from "react";
import { Link } from 'react-scroll';
const Footer = () => {
return (
<footer className="bg-amber-800">
<div className="max-w-7xl mx-auto
py-8 px-4 sm:px-6 lg:px-8">
<nav className="-mx-5 -my-2 flex flex-wrap
justify-center" aria-label="Footer">
<div className="px-5 py-2">
<div className="text-xl text-white font-bold
hover:text-gray-300 cursor-pointer">
Geeks Real Estate
</div>
</div>
<div className="px-5 py-2 cursor-pointer">
<Link to="home"
className="text-white hover:text-gray-300">
Home
</Link>
</div>
<div className="px-5 py-2 cursor-pointer">
<Link to="feature"
className="text-white hover:text-gray-300">
Features
</Link>
</div>
<div className="px-5 py-2 cursor-pointer">
<Link to="client"
className="text-white hover:text-gray-300">
Clients
</Link>
</div>
<div className="px-5 py-2 cursor-pointer">
<Link to="about"
className="text-white hover:text-gray-300">
About Us
</Link>
</div>
<div className="px-5 py-2 cursor-pointer">
<Link to="contact"
className="text-white hover:text-gray-300">
Contact Us
</Link>
</div>
</nav>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
<div className="col-span-1">
<h3 className="text-white text-lg font-medium mb-4">
About Us
</h3>
<p className="text-white mb-4">
Real Estate Company is a leading
provider of real estate services,
with a focus on delivering exceptional
value to our clients. Our team of experts
has deep industry knowledge and a proven
track record of success.
</p>
</div>
<div className="col-span-1">
<h3 className="text-white text-lg font-medium mb-4">
Services
</h3>
<ul className="text-white">
<li className="mb-2">Residential Real Estate</li>
<li className="mb-2">Commercial Real Estate</li>
<li className="mb-2">Property Management</li>
<li className="mb-2">Real Estate Investing</li>
</ul>
</div>
<div className="col-span-1">
<h3 className="text-white text-lg font-medium mb-4">
Social links
</h3>
<ul className="text-white">
<li className="mb-2">Facebook</li>
<li className="mb-2">Instagram</li>
<li className="mb-2">LinkedIn</li>
</ul>
</div>
</div>
<div className="mt-8 flex justify-center">
<p className="text-base text-white">
© {new Date().getFullYear()}
Geeks Real Estate. All rights reserved.
</p>
</div>
</div>
</footer>
);
};
export default Footer;
Steps to run the application:
Step 1: Type the following command in terminal
npm run start
Output:
Create A Real Estate Website Using React and Tailwind CSS
Similar Reads
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
React Fundamentals
React IntroductionReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. "Hello, World!" Program in ReactJavaScriptimport React from 'react'; function App() {
6 min read
React Environment SetupTo run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.Pre-requisite:We must have Nodejs installed on our PC. So, the very first step will be
3 min read
React JS ReactDOMReactDOM is a core React package that provides DOM-specific methods to interact with and manipulate the Document Object Model (DOM), enabling efficient rendering and management of web page elements. ReactDOM is used for: Rendering Components: Displays React components in the DOM.DOM Manipulation: Al
2 min read
React JSXJSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, it’s actually a syntax extensi
5 min read
ReactJS Rendering ElementsIn this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.What are React Elements?React elements are the smallest building blocks of a React application. They are different from DOM elements
3 min read
React ListsIn lists, React makes it easier to render multiple elements dynamically from arrays or objects, ensuring efficient and reusable code. Since nearly 85% of React projects involve displaying data collections—like user profiles, product catalogs, or tasks—understanding how to work with lists.To render a
4 min read
React FormsIn React, forms are used to take input from users, like text, numbers, or selections. They work just like HTML forms but are often controlled by React state so you can easily track and update the input values.Example:JavaScriptimport React, { useState } from 'react'; function MyForm() { const [name,
4 min read
ReactJS KeysA key serves as a unique identifier in React, helping to track which items in a list have changed, been updated, or removed. It is particularly useful when dynamically creating components or when users modify the list. When rendering a list, you need to assign a unique key prop to each element in th
4 min read
Components in React
React Lifecycle In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo
7 min read
React Hooks
Routing in React
Advanced React Concepts
React Projects