Create Dropdowns UI using React and Tailwind CSS
Last Updated :
08 Oct, 2024
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 CSS for styling.
Prerequisites
Approach For Creating Dropdowns UI
- We'll use React functional components and useState to manage the opening and closing of dropdowns.
- Utility classes will style the dropdown menu, ensuring it is responsive and has smooth transitions.
- We'll design a dropdown component to be reusable and customizable.
Steps to Create & Configure the Project
Step 1: Start by creating a new React project using Vite (or create a React app).
npm create vite@latest
Step 2: Navigate to your project folder and install the dependencies.
cd project-gfg
npm install
Step 3: Now install Tailwind CSS and its related dependencies.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 4: Configure Tailwind CSS by updating the file. tailwind.config.js as follows
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./index.html',
'./src/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
}Step 5: Add Tailwind's base, components, and utilities to your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Project Structure:
Project StructureUpdated Dependencies:
dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},Example: Now let us build the dropdown UI component.
JavaScript
// components/Dropdown.jsx
import React, { useState } from 'react';
const Dropdown = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleDropdown = () => {
setIsOpen(!isOpen);
};
return (
<div className="relative inline-block text-left">
{/* Green-colored text above the dropdown */}
<p className="text-green-500 mb-2">GeeksForGeeks</p>
<div>
<button
onClick={toggleDropdown}
className="inline-flex justify-center w-full rounded-md
border border-gray-300 shadow-sm px-4 py-2 bg-white
text-sm font-medium text-gray-700 hover:bg-gray-50
focus:outline-none"
>
Options
<svg
className="ml-2 -mr-1 h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
</div>
{isOpen && (
<div
className="origin-top-right absolute right-0 mt-2 w-56
rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5
focus:outline-none"
role="menu"
>
<div className="py-1" role="none">
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700
hover:bg-gray-100"
role="menuitem"
>
Account settings
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700
hover:bg-gray-100"
role="menuitem"
>
Support
</a>
<a
href="#"
className="block px-4 py-2 text-sm text-gray-700
hover:bg-gray-100"
role="menuitem"
>
License
</a>
</div>
</div>
)}
</div>
);
};
export default Dropdown;
// App.jsx
import React from 'react';
import Dropdown from './components/Dropdown';
const App = () => {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<Dropdown />
</div>
);
};
export default App;
To run the application:
npm run dev
Output
Dropdown UI