Create Select Menus UI using React and Tailwind CSS
Last Updated :
23 Jul, 2025
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.
Prerequisites
Approach
- Create a React app.
- Configure Tailwind CSS to style the components.
- Build form components that include input fields and buttons.
- Add icons to navbar links using the React Icons package.
Steps to Create & Configure the Project
Here, We will create a sample React JS project then we will install Tailwind CSS once it gets installed we will start creating Select Menus UI using React and Tailwind CSS. Below are the steps required for creating and configuring project:
Step 1: Set up a React Application
First create a sample React JS application by using the mentioned command then navigate to the project folder
npx create-react-app react-app
cd react-app
Project Structure:
Project folderUpdated 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-icons": "^5.3.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}Step 2: Install and Configure Tailwind CSS
Once Project is created successfully Now install and configure the Tailwind css by using below commands in your project.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 3: Install React Icons
Once Project is created successfully Now install react icons by using below commands in your project.
npm install react-icons
Step 4: Develop Business logic
Once Tailwind css installation and configuration is completed. Now we need develop user interface for Select Menus UI using tailwind css and html. And it is responsive web page for this we use App.js and App.css files we provide that source code for your reference.
- App.js
- index.css
- tailwind.config.js
Example: This example demonstrates the creation of Selecting Menus UI using React and Tailwind CSS:
CSS
/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
overflow: hidden;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
/*tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
//App.js
import { useState } from 'react';
import { FaBars, FaHome, FaInfo, FaServicestack, FaPhone, FaChevronDown } from 'react-icons/fa';
// Import icons from react-icons
import './App.css';
function App() {
const [isOpen, setIsOpen] = useState(false);
// Initialize the state for the mobile menu
const [selectedOption1, setSelectedOption1] = useState("Option 1");
const [selectedOption2, setSelectedOption2] = useState("Option 1");
const [selectedOption3, setSelectedOption3] = useState("Option 1");
const options = ["Option 1", "Option 2", "Option 3"];
return (
<header className="bg-green-600 shadow-md">
<div className="container mx-auto
px-4 py-4 flex
justify-between items-center">
<div className="text-xl
font-bold text-white">
Brand
</div>
<nav className="hidden md:flex
space-x-4 ml-5 mr-5">
<a href="#" className="flex items-center
text-white font-bold">
<FaHome className="mr-1" /> Home
</a>
<a href="#" className="flex items-center
text-white font-bold">
<FaInfo className="mr-1" /> About
</a>
<a href="#" className="flex items-center
text-white font-bold">
<FaServicestack className="mr-1" /> Services
</a>
<a href="#" className="flex items-center
text-white font-bold">
<FaPhone className="mr-1" /> Contact
</a>
{/* Select Menus */}
<div className="flex space-x-4">
<div className="relative">
<select
className="block appearance-none
w-full bg-white text-gray-700 border
border-gray-400 hover:border-gray-500
px-4 py-2 pr-8 rounded leading-tight
focus:outline-none focus:shadow-outline"
value={selectedOption1}
onChange={(e) => setSelectedOption1(e.target.value)}
>
{options.map((option, idx) => (
<option key={idx} value={option}>{option}</option>
))}
</select>
<div className="pointer-events-none
absolute inset-y-0 right-0 flex
items-center px-2 text-gray-700">
<FaChevronDown />
</div>
</div>
<div className="relative">
<select
className="block appearance-none
w-full bg-white text-gray-700 border
border-gray-400 hover:border-gray-500
px-4 py-2 pr-8 rounded leading-tight
focus:outline-none focus:shadow-outline"
value={selectedOption2}
onChange={(e) => setSelectedOption2(e.target.value)}
>
{options.map((option, idx) => (
<option key={idx} value={option}>{option}</option>
))}
</select>
<div className="pointer-events-none
absolute inset-y-0 right-0 flex
items-center px-2 text-gray-700">
<FaChevronDown />
</div>
</div>
<div className="relative">
<select
className="block appearance-none
w-full bg-white text-gray-700 border
border-gray-400 hover:border-gray-500
px-4 py-2 pr-8 rounded leading-tight
focus:outline-none focus:shadow-outline"
value={selectedOption3}
onChange={(e) => setSelectedOption3(e.target.value)}
>
{options.map((option, idx) => (
<option key={idx} value={option}>{option}</option>
))}
</select>
<div className="pointer-events-none
absolute inset-y-0 right-0 flex
items-center px-2 text-gray-700">
<FaChevronDown />
</div>
</div>
</div>
</nav>
<div className="md:hidden">
<button onClick={() => setIsOpen(!isOpen)} className="text-white">
<FaBars size={24} /> {/* Hamburger icon for mobile */}
</button>
</div>
</div>
{/* Mobile Menu */}
{isOpen && (
<nav className="md:hidden bg-green-600 p-4
space-y-2 ml-2 mr-2">
<a href="#" className="flex items-center
text-white font-bold">
<FaHome className="mr-2" /> Home
</a>
<a href="#" className="flex items-center
text-white font-bold">
<FaInfo className="mr-2" /> About
</a>
<a href="#" className="flex items-center
text-white font-bold">
<FaServicestack className="mr-2" /> Services
</a>
<a href="#" className="flex items-center
text-white font-bold">
<FaPhone className="mr-2" /> Contact
</a>
{/* Select Menus for Mobile */}
<div className="flex flex-col space-y-2">
<div className="relative">
<select
className="block appearance-none
w-full bg-white text-gray-700 border
border-gray-400 hover:border-gray-500
px-4 py-2 pr-8 rounded leading-tight
focus:outline-none focus:shadow-outline"
value={selectedOption1}
onChange={(e) => setSelectedOption1(e.target.value)}
>
{options.map((option, idx) => (
<option key={idx} value={option}>{option}</option>
))}
</select>
<div className="pointer-events-none
absolute inset-y-0 right-0 flex items-center
px-2 text-gray-700">
<FaChevronDown />
</div>
</div>
<div className="relative">
<select
className="block appearance-none
w-full bg-white text-gray-700
border border-gray-400
hover:border-gray-500 px-4
py-2 pr-8 rounded leading-tight
focus:outline-none focus:shadow-outline"
value={selectedOption2}
onChange={(e) => setSelectedOption2(e.target.value)}
>
{options.map((option, idx) => (
<option key={idx} value={option}>{option}</option>
))}
</select>
<div className="pointer-events-none
absolute inset-y-0 right-0 flex
items-center px-2 text-gray-700">
<FaChevronDown />
</div>
</div>
<div className="relative">
<select
className="block appearance-none
w-full bg-white text-gray-700
border border-gray-400
hover:border-gray-500 px-4
py-2 pr-8 rounded leading-tight
focus:outline-none focus:shadow-outline"
value={selectedOption3}
onChange={(e) => setSelectedOption3(e.target.value)}
>
{options.map((option, idx) => (
<option key={idx} value={option}>{option}</option>
))}
</select>
<div className="pointer-events-none
absolute inset-y-0 right-0 flex
items-center px-2 text-gray-700">
<FaChevronDown />
</div>
</div>
</div>
</nav>
)}
</header>
);
}
export default App;
Step 5: Run the Application
Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.
npm start
Output: Once Project is successfully running then open the below URL to test the output.
http://localhost:3000/
Conclusion
Creating a Select Menu UI using React and Tailwind CSS allows you to build modern responsive and customizable UI components quickly. Adding React Icons further enhances the user experience by providing intuitive visual cues. This approach offers a reusable and easily stylable component for future projects.
Explore
React Fundamentals
Components in React
React Hooks
Routing in React
Advanced React Concepts
React Projects