Create A Real Estate Website Using React and Tailwind CSS
Last Updated :
12 Mar, 2024
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="http://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="http://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:
Similar Reads
Create Header using React and Tailwind CSS
In modern web development building responsive and customizable user interfaces is crucial. One of the essential elements of any web application is the header which typically contains navigation links branding or other important controls. we will create a responsive header section using React and Tai
4 min read
Create an Agency Website using React and Tailwind
An agency website using React and Tailwind consists of basic components such as a home page, services, contact us, features, etc. It also has a contact form that will enable the user to contact if any issue arises on the website or the benefits to be availed by the user through the website. Preview
7 min read
Create Newsletter Sections using React and Tailwind CSS
A Newsletter section is a place in the footer that allows the user to access any further updates or notifications regarding the website after getting his or her email. It accepts a declaration from the user about receiving updates that have several links to other social media sites & links withi
3 min read
Create Product Features using React and Tailwind CSS
The goal is to build a React component that displays a list of credit card features alongside an image of the card itself. The features will include benefits such as rewards cashback and fraud protection each accompanied by an icon. Tailwind CSS will be used for styling to ensure responsive and mode
4 min read
Create Feature Sections using React and Tailwind CSS
Creating feature sections in a React application enhances the UI by providing structured and interactive components. Using Tailwind CSS for styling and React Icons for adding icons can simplify the development process. In this article, we will learn how to create feature sections using React and Tai
4 min read
Create FAQs using React and Tailwind CSS
A Frequently Asked Questions section is a common feature found on websites and applications that helps users find answers to common queries in an organized manner. A well-designed FAQ can improve user experience reduce support requests and provide users with quick and easy access to helpful informat
5 min read
Create Incentives using React and Tailwind CSS
Creating an Incentives section in a web application can be a great way to highlight special offers and rewards or bonuses that motivate users to engage with your product or service. This feature can be used in various scenarios such as e-commerce websites educational platforms or company portals. In
4 min read
Create a Weather app using React and Tailwind
React JS is a very famous library for front-end development. In this article, we will walk through the process of building a weather app using React, a popular JavaScript library for building user interfaces(UI). Here we also use Tailwind CSS, a utility-first CSS framework. Here we also use a weathe
5 min read
Create Reviews using React and Tailwind CSS
In general, reviews, are the most essential feedback mechanisms that serve multiple purposes like User feedback, Product rating, Content rating, etc. And if we use a reviews system in our website then it also helps the new users to know about the product or the users easily. In this article, we will
4 min read
Create Footers Using React And Tailwind CSS
We will learn how to create a responsive footer using React and Tailwind CSS with a modern design. The footer will feature a green background with white text providing a clean and professional look. We will create three sections: Contacts social media and Services to display important information an
3 min read