Create Navbars UI using React and Tailwind CSS
Last Updated : 10 Oct, 2024
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:
Project StructureUpdated 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.
JavaScript // 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 start
Output:
Similar Reads
Create Feeds UI using React and Tailwind CSS
In the world of social networking, feeds are the primary way users interact with content. Whether it is on LinkedIn, Facebook, or Twitter the feed showcases posts updates, and activities from people or organizations. This article will help you build a LinkedIn-style feed UI using React and Tailwind
4 min read
Create FAQs using React and Tailwind CSS
A Frequently Asked Questions section is a common feature found on websites and applications that helps users find answers to common queries in an organized manner. A well-designed FAQ can improve user experience reduce support requests and provide users with quick and easy access to helpful informat
5 min read
Create Dropdowns UI using React and Tailwind CSS
Dropdown UI components are often used in web applications for forms, navigation, or user preferences, allow users to select from a list of options by clicking a button, which will display a drop-down menu, in this article we will create a dropdown element using React for functionality and Tailwind C
3 min read
Create Header using React and Tailwind CSS
In modern web development building responsive and customizable user interfaces is crucial. One of the essential elements of any web application is the header which typically contains navigation links branding or other important controls. we will create a responsive header section using React and Tai
4 min read
Create Pagination UI Using React And Tailwind CSS
When working with huge data sets in online applications, pagination is an essential feature. It makes a lengthy list of items easier to browse through by dividing them into digestible parts. This article will tell you how to use Tailwind CSS for styling and React for front-end functionality to creat
3 min read
Create Select Menus UI using React and Tailwind CSS
We will build a Select Menu UI using React and Tailwind CSS. Select menus are dropdowns that allow users to choose one option from a predefined list. We'll style the dropdown using Tailwind CSS for a modern, clean look and integrate React Icons to improve user experience. PrerequisitesReact.jsTailwi
5 min read
Create Footers Using React And Tailwind CSS
We will learn how to create a responsive footer using React and Tailwind CSS with a modern design. The footer will feature a green background with white text providing a clean and professional look. We will create three sections: Contacts social media and Services to display important information an
3 min read
Create Radio Groups UI using React and Tailwind CSS
React is a popular JavaScript library for building user interfaces combined with Tailwind CSS a utility-first CSS framework that offers a powerful approach to developing stylish and responsive components. This article shows how to build various radio group UIs using React and Tailwind CSS. It includ
5 min read
Create Incentives using React and Tailwind CSS
Creating an Incentives section in a web application can be a great way to highlight special offers and rewards or bonuses that motivate users to engage with your product or service. This feature can be used in various scenarios such as e-commerce websites educational platforms or company portals. In
4 min read
Create Modal Dialogs UI using React and Tailwind CSS
Modal dialogs are an essential part of modern web applications. They offer a user-friendly way to present information or collect input without navigating away from the current page. Modals typically appear as overlays which help focus the user's attention on specific tasks like forms or alerts and c
6 min read