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.

Agency Website

Prerequisites:

• React JS
• Tailwind CSS
• Node & NPM

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:

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/

Agency Website