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 of Final Output : Let us have a look at how the final output will look like.
Prerequisites:
Approach:
- Set up the project using vite and install basic dependencies.
- Create configurations for tailwind css.
- Create several components for header, home, contact us, services and footer.
- Create a form in contact us to contact with the client.
Steps to Create a React Application and Installing Module:
Step 1 : Set up the project using the command.
npm create vite@latest
Step 2 : Navigate to the path of the directory and install node modules using the command.
npm install
Step 3 : Install tailwind css using the command.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 4 : Configure the tailwind paths in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 5 : Add tailwind directives to your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1"
}
Example: Below is an example to build an agent website in Tailwind CSS and ReacJS.
import React from 'react' ;
import Header from './components/Header' ;
import Main from './components/Main' ;
import Services from './components/Services' ;
import Contact from './components/Contact' ;
import Footer from './components/Footer' ;
const App = () => { return (
<div className= 'bg-blue-50
min-h-[100vh] min-w-[100vw]' >
<Header />
<Main />
<Services />
<Contact />
<Footer />
</div>
)
} export default App
|
import React from 'react' ;
const Header = () => { return (
<div id= 'header'
className= 'flex items-center
justify-between' >
<div className= 'text-[24px]
ml-[80px] font-bold underline' >
Let 's Create
</div>
<div>
<ul className=' flex cursor-pointer m-6 '>
<a href="#aboutUS">
<li
className=' p-6 text-[20px]
hover:text-blue-950
text-orange-800
transition-all delay-75
hover:underline hover:delay-75
'>
<a href="#header">About Us</a>
</li>
</a>
<li
className=' p-6 text-[20px]
hover:text-blue-950 text-orange-800
transition-all delay-75
hover:underline hover:delay-75
'>
<a href="#services">Services</a>
</li>
<li
className=' p-6 text-[20px]
hover:text-blue-950
text-orange-800
transition-all delay-75
hover:underline hover:delay-75
'>
<a href="#contact">Contact Us</a>
</li>
<li
className=' p-6 text-[20px]
hover:text-blue-950
text-orange-800
transition-all delay-75
hover:underline hover:delay-75
'>
<a href="#footer">Footer</a>
</li>
</ul>
</div>
<div>
<button className=' border-green-800
text text-2xl
text-green-800
mr-[35px]
border-4 p-[6px]
rounded-md hover:bg-green-800
hover:text-white
hover:transition-all
delay-75 '>Let' s Talk</button>
</div>
</div>
)
} export default Header
|
import React from 'react'
const Main = () => { return (
<div id= 'aboutUs' className= 'flex flex-col
gap-6 bg-white ml-[55px]
mr-[55px] rounded-lg p-8' >
<div className= 'mt-[45px] text-3xl
font-semibold text-green-800' >
Welcome to Our Agency
</div>
<div className= 'text-2xl text-indigo-900' >
Smart Ideas for your
<div className= 'italic font-bold mt-2' >
Designs are Here!
</div>
</div>
<div className= 'flex gap-28' >
<div className= 'text-[18px]' >
Welcome to <a href= "#header" >
<span className= 'text-cyan-800
text-[20px] cursor-pointer
font-bold underline' >
Let 's Create
</span>
</a>, a place where innovation and
creativity collide! Our creative
team specialises in creating
eye-catching visual experiences
that are customised for your business.
We bring your ideas to life with
anything from gorgeous logos and
modern websites to captivating
packaging and persuasive marketing
materials. Allow our creative team to
take your brand to new heights.
Come discover the power of outstanding
design with us now!
</div>
<img src="../Images/work.avif"
className=' w-[380px] h-[252px]
mr-[80px] rounded-full mt-[-75px] ' />
</div>
<div className="flex">
<button
className=' border-green-800 text text-xl
text-green-800 border-2 p-[8px]
pl-[25px] pr-[25px]
rounded-md hover:bg-green-800 hover:text-white
hover:transition-all delay-75'
>
Discover More
</button>
</div>
</div>
)
} export default Main
|
import React from 'react' ;
const Contact = () => { return (
<div id= 'contact'
className= 'bg-white ml-[55px]
mr-[55px] mt-10 rounded-lg ' >
<div className= "flex flex-col p-10" >
<div className= 'text-3xl mt-6 font-semibold
text-green-900' >
Contact Us
</div>
<form>
<div className= 'flex flex-col gap-4' >
<label htmlFor= "name"
className= 'text-[18px] mt-4
text-green-950' >
Name
</label>
<input type= "text" className= 'mb-4
outline-none border-2 p-2 border-gray-500
rounded-md focus:ring focus:border-green-800'
required name= "name" id= "name" />
</div>
<div className= 'flex flex-col gap-4' >
<label htmlFor= "no" className= 'text-[18px]
text-green-950' >
Mobile No
</label>
<input type= "number" className= 'mb-4 outline-none
border-2 p-2 border-gray-500 rounded-md focus:ring
focus:border-green-800 '
required name= "no" id= "no" />
</div>
<div className= 'flex flex-col gap-4' >
<label htmlFor= "email" className= 'text-[18px
] text-green-950' >
Email Id
</label>
<input type= "email" className= 'mb-4 outline-none
border-2 p-2 border-gray-500 rounded-md focus:ring
focus:border-green-800 ' required name= "email"
id= "email " />
</div>
<div className= 'flex flex-col gap-4' >
<label htmlFor= "text" className= 'text-[18px]
text-green-950' >
Feedback(If any)
</label>
<textarea name= "text" className= 'mb-4 outline-none
border-2 p-2 border-gray-500 rounded-md h-[105px]
focus:ring focus:border-green-800 ' id= "text" >
</textarea>
</div>
<div>
<button className= ' border-green-800 text text-xl
text-green-800
border-2 p-[8px] pl-[25px] pr-[25px]
rounded-md hover:bg-green-800
hover:text-white hover:transition-all delay-75 mb-5
w-full
' >Submit</button>
</div>
</form>
</div>
</div>
)
} export default Contact
|
import React from 'react'
const Services = () => { return (
<div id= 'services'
className= 'bg-white ml-[55px] mr-[55px] rounded-lg ' >
<div className= "flex mt-[80px] items-center gap-20" >
<img src= "../Images/work2.avif"
className= 'rounded-full w-[380px]
h-[252px] ml-[80px]' />
<div className= 'ml-[-55px]' >
<div className= 'text-3xl
text-orange-950 drop-shadow mt-6' >
We create some things for you!
</div>
<div className= 'mt-2 mb-6 text-[20px]' >
<span className= 'text-3xl text-orange-600 italic' >
Designs
</span>
for your success future!
</div>
<div >
<ul className= 'mt-8 text-[18px] mb-6' >
<li className= 'list-disc ml-4' >
<span className= 'drop-shadow text-[20px]
font-semibold text-green-950' >
Inspiration Gallery:
</span>
a variety of UI/UX ideas in the inspiration
gallery to get fast creative inspiration
</li>
<li className= 'list-disc ml-4' >
<span className= 'drop-shadow text-[20px]
font-semibold text-green-950' >
Case Studies:
</span>
Gain knowledge from actual initiatives
and triumphs.
</li>
<li className= 'list-disc ml-4' >
<span className= 'drop-shadow text-[20px]
font-semibold text-green-950' >
Trend Insights:
</span>
Stay ahead with the latest design
trends and forecasts
</li>
<li className= 'list-disc ml-4' >
<span className= 'drop-shadow text-[20px]
font-semibold text-green-950' >
Workshops & Webinars:
</span>
Gain practical knowledge
and advice from experts.
</li>
<li className= 'list-disc ml-4' >
<span className= 'drop-shadow text-[20px]
font-semibold text-green-950' >
Community Involvement:
</span>
Make connections, exchange ideas,
and work together.
</li>
</ul>
</div>
<button
className= ' border-green-800 text text-xl
text-green-800
border-2 p-[8px] pl-[25px] pr-[25px]
rounded-md hover:bg-green-800
hover:text-white hover:transition-all delay-75 mb-5'
>
Know More
</button>
</div>
</div>
</div>
)
} export default Services
|
import React from 'react' ;
import { FaTwitter } from "react-icons/fa6" ;
import { FaFacebook } from "react-icons/fa" ;
import { FaInstagramSquare } from "react-icons/fa" ;
const Footer = () => { return (
<footer id= 'footer'
className= "bg-gray-800 text-white py-4 mt-20" >
<div className= "container mx-auto grid
grid-cols-4 gap-4 text-center" >
<div className= "flex flex-col justify-center" >
<h2 className= "text-lg font-bold" >
Let's Create
</h2>
<input type= "email" placeholder= "Enter your email"
className= "mt-2 px-4 py-2 bg-gray-700 text-white
border border-gray-600 rounded-md focus:ring
focus:border-green-400" />
</div>
<div className= "flex flex-col justify-center" >
<h2 className= "text-lg font-semibold" >
Our Services
</h2>
<ul className= "mt-2" >
<li className= "hover:text-gray-300" >
Inspiration Gallery
</li>
<li className= "hover:text-gray-300" >
Case Studies
</li>
<li className= "hover:text-gray-300" >
Trend Insights
</li>
<li className= "hover:text-gray-300" >
Workshops and Webinars
</li>
<li className= "hover:text-gray-300" >
Community Involvement
</li>
</ul>
</div>
<div className= "flex flex-col justify-center" >
<h2 className= "text-lg font-bold" >
Our Company
</h2>
<ul className= "mt-2" >
<li className= "hover:text-gray-300" >
Our Services
</li>
<li className= "hover:text-gray-300" >
Home Section
</li>
</ul>
</div>
<div className= "flex flex-col justify-center" >
<h2 className= "text-lg font-bold" >Contact Us</h2>
<address className= "mt-2" >
Don Bosco Street, Ottawa, Canada
</address>
<p className= "mt-1" >Phone: +1234567890</p>
<p>Email: letscreate153@gmail.com</p>
<div className= "mt-2 flex justify-center" >
<a href= "#" className= "mr-2 text-4xl
hover:text-green-300 cursor-default" >
<FaTwitter />
</a>
<a href= "#" className= "mr-2 text-4xl
hover:text-green-300 cursor-default" >
<FaInstagramSquare />
</a>
<a href= "#" className= "hover:text-green-300
text-4xl cursor-default" >
<FaFacebook />
</a>
</div>
</div>
</div>
</footer>
);
}; export default Footer;
|
@import url ( 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap' );
* { font-family : "Poppins" , sans-serif ;
font-weight : 500 ;
font-style : normal ;
margin : 0 ;
padding : 0 ;
box-sizing: border-box;
} html { scroll-behavior: smooth
} @tailwind base; @tailwind components; @tailwind utilities; |
Start your application using the following command.
npm run dev
Output : The window opens on localhost : http://localhost:5173/