In this article, we will make a react js website with tailwind CSS. We created many projects in previous tutorials. But today, we will create a UI/UX real estate website. This tutorial contains simple code and is suitable for beginners to do this project.
About website
It is a UI/UX, single-page real estate website with a hero section. It is an entirely responsive website with a flexbox layout. And compactable for all sizes of devices. It has two section navbar and a hero section. The navbar contains a logo, the main menu, and a signup button. This navbar adjusts itself according to the screen size. The Hero section has an image section and a text section. The text contains a heading, a call to action button, some social media buttons, and paragraph text.
Here, you can view a demo of the website and code repository in the GitHub repository.
Where to find Images?
You can find the image in the project demo. Or you can also find them in the GitHub repository.
Note:- Place all images in the assets folder. Path of the folder
./src/assets
Technologies used in this project
This React website uses Tailwind CSS to create styles. To add icons, we
use react-icons dev dependency. This project is built with Vite
js and react. You can also make this website with HTML, CSS, and JavaScript.
But React js makes it very easy.
Project set up
To set up the project, Node.js is required on your device. Run the given command to check if node js is installed on your PC.
node -v
Creating a Vite React app
Enter the given cmd commands to create react app.
#Create react app
npm create vite@latest
#Go to project
cd project-name
#Install packages
npm install
#To Run app
npm run dev
Install an additional package for icons
We created react app. Now it is time to install the
react-icon package. Run the following code to install it.
npm install react-icons
Installing tailwind CSS
To install tailwind with react, run the following commands in cmd.
# To install tailwind css.
npm install -D tailwindcss postcss autoprefixer
#To initilized tailwind CSS
npx tailwindcss init -p
Configure template paths
To work with tailwind CSS, you need to add your template files path to the
tailwind.config.js. Add your template to the
contentobject. Or you can replace the code of your file with the
given code.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{jsx,js}', './index.html'],
theme: {
extend: {},
},
plugins: [],
}
Add the directives of tailwind to your CSS
In your index.css file remove the previous code and add the given
tailwind directives.
@tailwind base; @tailwind components; @tailwind utilities;
Setting up the project structure
-
Create a
componentsfolder in yoursrcfolder -
Make two files in the
componentsfolderNavbar.jsxandHeroSection.jsx. - Also, delete the
App.cssfile. -
After setting up your app, its structure should look like this.
It's time to build our React Js Website.
Building React Js Website
Creating App.jsx file
Create a App.jsx file in src folder if required.
Replace the previous code with the given code.
import React from "react";
import Navbar from "./components/Navbar";
import HeroSection from "./components/HeroSection";
const App = () => {
return (
<div className="w-full min-h-screen flex justify-center relative bg-gradient-to-bl from-[#572534] to-[#dd8356] lg:via-[#C76B6A] lg:to-[#F49262] overflow-x-hidden">
<div className=" container m-0">
<Navbar />
<HeroSection />
</div>
</div>
);
};
export default App;
It is the main file of your app. Here you can see the main body of the website. In this body, we call the navbar and hero section. We code them in different file components.
Creating navbar
Go to ./src/components/Navbar.jsx file and paste the given code
into this file.
import React, { useState } from "react";
import logo from "../assets/logo.svg";
import { RiMenu4Fill, RiCloseFill } from "react-icons/ri";
const Navbar = () => {
const [openMenu, setOpenMenu] = useState(false);
const menu = ["Home", "About", "Contact", "Services"];
return (
<div className=" h-20 w-full flex justify-between items-center px-2 ">
{/* logo */}
<a className="cursor-pointer" link="#">
<img src={logo} alt="new homes" />
</a>
{/*Main Menu for large devices*/}
<div className="hidden md:block">
{/* menu */}
{menu.map((currentValue, index) => {
return (
<a
href="#"
key={index}
className="px-6 py-2 rounded-full hover:bg-black hover:bg-opacity-10 text-lg font-normal text-[#F49263] lg:mr-10"
>
{currentValue}
</a>
);
})}
{/* button */}
<a
href="#"
className="px-6 py-2 rounded-full text-lg font-medium text-white bg-[#F49263] hover:bg-[#d87d53]"
>
Sign up
</a>
</div>
{/*Main Menu for mobile devices*/}
<div className="block md:hidden">
<RiMenu4Fill
className="text-[#F49263] w-10 h-10"
onClick={() => {
setOpenMenu(true);
}}
/>
{/* Menu for small devices */}
<div
className={`fixed top-0 left-0 h-screen bg-slate-50 flex flex-col items-center justify-center transition-all duration-300 overflow-hidden z-50 §{
openMenu ? "w-screen opacity-100" : "w-0 opacity-0"
} `}
style={{
background:
"linear-gradient(228.32deg, #672C3F 16.3%, #C76B6A 68.23%, #F49262 84.69%)",
}}
>
<RiCloseFill
className="text-[#F49263] w-10 h-10 absolute right-5 top-5 cursor-pointer"
onClick={() => {
setOpenMenu(false);
}}
/>
{menu.map((currentValue, index) => {
return (
<a
href="#"
key={index}
onClick={() => {
setOpenMenu(false);
}}
className="px-6 py-2 my-1 rounded-full hover:bg-black hover:bg-opacity-10 text-xl tracking-wider font-normal text-[#F49263] lg:mr-10"
>
{currentValue}
</a>
);
})}
<a
href="#"
className="px-10 py-2 my-2 rounded-full text-lg font-medium text-white bg-[#F49263] hover:bg-[#d87d53]"
>
Sign up
</a>
</div>
</div>
</div>
);
};
export default Navbar;
It is the navbar of the website imported into the App.jsx file.
In this file, we import the logo image and icons. The navbar has three
components logo, menu, and call to action button. Here
Navbar component contains a useSate hook that
handles the small devices menu. It has a boolean value. If the boolean value
is actual, it opens the menu. False value closed the menu. We define all menu
items in an array to make it simple.
Note: You can find the logo on the GitHub repository.
Creating hero section
Go to ./src/components/HeroSection.jsx file and paste
the given code into this file.
import React from "react";
import heroImage from "../assets/heroImage.png";
import { BsFacebook, BsTwitter } from "react-icons/bs";
import { AiFillInstagram } from "react-icons/ai";
const HeroSection = () => {
return (
<div className=" w-full flex justify-between flex-col lg:flex-row mt-5">
{/* Hero image */}
<div className="w-full lg:w-[50%] xl:w-[45%] grid items-center ">
<img src={heroImage} alt="hero image" className="" />
</div>
{/* Hero text content */}
<div className="w-full lg:w-[50%] h-full ">
<h1 className="text-5xl px-5 xl:px-2 md:text-6xl 2xl:text-7xl font-black text-[#F49263] mt-10">
Find your dream home today!
</h1>
<p className="text-[#F49263] text-lg 2xl:text-2xl px-5 xl:px-2 opacity-90 my-10">
Your one-stop shop for all your real estate needs. Our team of
experienced agents is dedicated to helping you find the perfect home
or investment property. With a wide range of properties available, we
are confident we can help you find the right fit. Let us help you make
your real estate dreams a reality.
</p>
<a
href="#"
className="mx-5 xl:mx-2 px-16 py-2 rounded-full text-lg 2xl:text-lg font-medium text-white bg-[#F49263] hover:bg-[#d87d53] bg-opacity-50 border-4 border-[#F49263]"
>
Explore!
</a>
<div className=" flex my-10 mx-10">
<BsFacebook className="text-[#F49263] text-2xl 2xl:text-3xl mx-2 2xl:mx-3" />
<BsTwitter className="text-[#F49263] text-2xl 2xl:text-3xl mx-2 2xl:mx-3" />
<AiFillInstagram className="text-[#F49263] text-2xl 2xl:text-3xl mx-2 2xl:mx-3" />
</div>
</div>
</div>
);
};
export default HeroSection;
In the HeroSection.jsx file a hero image, and icons are imported.
The main component in this file contains ordinary jsx that is understandable.
This jsx has a main heading, a paragraph, a call to action button, and social
media icons. This hero section's flexbox layout adjusts itself according to
size.
Done!
Conclusion
We created a UI/UX and responsive website without writing complex CSS. That's the power of Tailwind CSS. You can create complex CSS applications easily. If you are worried about images, you can find them on the GitHub repository. Another way to find them is through the website preview.
I enjoy building this React JS Website with Tailwind CSS. If you also appreciate it, share this article with your friends and on your social media handles. Make sure to leave your valuable comment in the comment section.