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 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.
Javascript
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 |
Javascript
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 |
Javascript
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 |
Javascript
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 |
Javascript
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 |
Javascript
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; |
CSS
@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/