📌 Step 1: Project Setup
// Create React app npx create-react-app responsive-navbar // Move into project cd responsive-navbar // Install Tailwind CSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p // tailwind.config.js content: ["./src/**/*.{js,jsx,ts,tsx}"] // index.css @tailwind base; @tailwind components; @tailwind utilities;
📌 Step 2: Navbar Component in React
// src/components/Navbar.js import React, { useState } from "react"; import { Menu, X } from "lucide-react"; const Navbar = () => { const [isOpen, setIsOpen] = useState(false); const toggleMenu = () => { setIsOpen(!isOpen); }; return ( ); }; export default Navbar;
📌 Step 3: Use the Navbar in App Component
// src/App.js import React from "react"; import Navbar from "./components/Navbar"; function App() { return ( ); } export default App;