Create Navbars UI using React and Tailwind CSS
Last Updated :
10 Oct, 2024
Improve
A UI plays an important role because a clean, well-designed interface creates a positive first impression and if the UI is good then users can stay on our website some more time and if the UI is bad then they can not stay on our site for more time. we will see how to Create Navbars UI using React and Tailwind CSS.
Prerequisites
Approach
- First, create the basic structure of the Navbar using HTML inside React components. Then add a logo or a brand name of your website on the left side of the Navbar and then create some navigation links (e.g., Home, About, Contact us page) and you can place them on the right side of the page.
- Then, Use Tailwind CSS classes like "flex," "justify-between," and "item-center" to manage the layout, spacing, and alignment.
- You can also make the UI responsive and also use React state to manage the opening and closing of the Navbar menu. Also, create a useState() hook to toggle the Navbar between opened and closed state (for that use the isOpen() state variable).
Steps to Create Navbars UI using React and Tailwind CSS
Step 1: Create the React application using the following command.
npx create-react-app navbar-ui
cd navbar-ui
Step 2: Install the Tailwind CSS using the following command.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Step 3: Configure the tailwind paths in your tailwind.config.js file.
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 4: Add Tailwind's directives to your CSS file (e.g., src/index.css)
@tailwind base;
@tailwind components;
@tailwind utilities;
Project Structure:
Updated Dependencies:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Example: Create the required files and add the given codes.
// Navbar.js
import React, { useState } from 'react';
const Navbar = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<nav className="bg-green-600 p-4">
<div className="container mx-auto flex justify-between items-center">
{/* Brand Name */}
<a href="/" className="text-white text-lg font-semibold">GeeksforGeeks
</a>
{/* Hamburger Menu for mobile */}
<button onClick={() => setIsOpen(!isOpen)}
className="text-white focus:outline-none md:hidden">
{/* Hamburger Icon and Close Icon */}
{isOpen ? (
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
) : (
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16m-7 6h7"
/>
</svg>
)}
</button>
{/* Navigation Links */}
<div
className={`w-full md:flex md:items-center md:w-auto
md:space-x-4 absolute md:relative top-16 left-0 md:top-0
md:left-0 p-4 md:p-0 bg-green-600 md:bg-transparent
transition-all duration-500 ease-in-out transform ${isOpen ?
'translate-x-0' : 'translate-x-full'
} md:translate-x-0`}>
<a href="#home"
className="block py-2 px-4 text-white hover:text-gray-200
md:inline-block">Home
</a>
<a href="#about"
className="block py-2 px-4 text-white hover:text-gray-200
md:inline-block">About
</a>
<a href="#contact"
className="block py-2 px-4 text-white hover:text-gray-200
md:inline-block">Contact
</a>
</div>
</div>
</nav>
);
};
export default Navbar;
// About.js
import React from 'react';
const About = () => {
return (
<section id="about" className="bg-gray-100 py-12">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center text-green-600 mb-8">
About GeeksforGeeks
</h2>
<p className="text-gray-700 text-lg leading-relaxed mb-6">
<strong>Company Profile and Brand:</strong>
GeeksforGeeks is a leading platform that provides
computer science resources and coding challenges for
programmers and technology enthusiasts, along with
interview and exam preparations for upcoming aspirants.
With a strong emphasis on enhancing coding skills and
knowledge, it has become a trusted destination for over
12 million plus registered users worldwide.
</p>
<p className="text-gray-700 text-lg leading-relaxed mb-6">
The platform offers a vast collection of tutorials,
practice problems, interview tutorials, articles, and
courses, covering various domains of computer science.
Our exceptional mentors hailing from top colleges &
organizations have the ability to guide you on a journey
from the humble beginnings of coding to the pinnacle of
expertise. Under their guidance, watch your skills
flourish as we lay the foundation and help you conquer
the world of coding.
</p>
</div>
</section>
);
};
export default About;
// App.js
import React from 'react';
import Navbar from './Navbar';
import About from './About';
import ContactForm from './ContactForm';
function App() {
return (
<div>
<Navbar />
<main>
<About />
<ContactForm />
</main>
</div>
);
}
export default App;
// ContactForm.js
import React, { useState } from 'react';
const ContactForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
alert('Form submitted');
// Form submission logic here
};
return (
<section id="contact" className="py-12 bg-white">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center text-green-600 mb-8">
Contact Us
</h2>
<form onSubmit={handleSubmit} className="max-w-xl mx-auto space-y-4">
<div>
<label className="block text-gray-700 text-sm font-bold mb-2">
Name
</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md
focus:outline-none focus:ring-2 focus:ring-green-600"
placeholder="Your Name"
required
/>
</div>
<div>
<label className="block text-gray-700 text-sm font-bold mb-2">
Email
</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md
focus:outline-none focus:ring-2 focus:ring-green-600"
placeholder="Your Email"
required />
</div>
<div>
<label className="block text-gray-700 text-sm font-bold mb-2">
Message
</label>
<textarea
name="message"
value={formData.message}
onChange={handleChange}
className="w-full px-3 py-2 border rounded-md
focus:outline-none focus:ring-2 focus:ring-green-600"
placeholder="Your Message"
required>
</textarea>
</div>
<div className="text-center">
<button
type="submit"
className="bg-green-600 text-white px-6 py-2
rounded-md hover:bg-green-700 transition-colors">
Submit
</button>
</div>
</form>
</div>
</section>
);
};
export default ContactForm;
To start the Application run the following command.
npm startOutput:
