Tailwind Tools:
Button Generator
Table Tool
Cards
Alerts
Progress
☰
Button Generator
Table Tool
Cards
Alerts
Progress
Tailwind Dropdown Styler
Create and customize dropdown components with real-time preview
Dropdown Options
Dropdown Type
Choose between single button and split button styles
Single Button
Split Button
Size
Set the size of the dropdown button
Small
Default
Large
Direction
Choose the direction the dropdown menu opens
Drop Down
Drop Up
Drop Left
Drop Right
Add Dividers
Add separator lines between dropdown items
Add Headers
Include section headers in the dropdown menu
Active/Disabled Items
Enable item states like active or disabled
Open on Hover
Open dropdown when mouse hovers over button
Add Menu Shadow
Add Menu Border
Alignment
Left
Right
Button Color
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Menu Color
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Menu Width
200px
250px
300px
Full Width
Menu Position
Static
Fixed
Menu Radius
Small
Medium
Large
Button Text
Show Button Icon
Custom Classes
Live Preview
Dropdown Items
Add Item
Generated Code
Copy
Advanced Options
Button Style
Outline Style
Rounded Style
Item Features
Enable Item Links
Enable Item Icons
Quick Templates
Navigation Menu
Settings Menu
User Profile Menu
How to Use
Include the Script:
Generated code contains markup and script. Enusre enclosing the script in it's tag.
Dropdown Markup:
Ensure the generated dropdown HTML uses: A parent container with the
relative
class.
A dropdown menu with the
absolute hidden
classes.
Select your desired dropdown options.
View the live preview as you make changes.
Click on "Generate Code" to get the HTML code for your dropdown.
Copy the code and paste it into your project.