Tailwind Tools:
Button Generator
Table Tool
Modal Generator
Cards
Alerts
Progress
More
▼
Dropdown
Accordion
Popover
Tooltips
Pagination
Badges
Breadcrumbs
Text Maker
Link Maker
☰
Button Generator
Table Tool
Cards
Alerts
Progress
More
▼
Pagination
Dropdown
Badges
Breadcrumbs
Text Maker
Link Maker
Tailwind Accordion Maker
Accordion Options
Accordion Type
Choose the style of accordion
Basic
Edge-to-Edge
Number of Items
How many accordion items to create
Allow Multiple Open
Enable multiple accordion items to be open simultaneously
Icon Type
Choose the icon to display on accordion headers
None
Chevron
Plus/Minus
Arrow
Caret
Styling Options
Border
Add a border around accordion items
Shadow
Add a shadow effect to accordion
Rounded Corners
Use rounded corners on accordion items
Spacing Between Items
Add margin between accordion items
Color Options
Header Background
Background color for accordion headers
White
Lightest Gray
Lighter Gray
Light Gray
Gray
Dark Gray
Darker Gray
Lightest Red
Lighter Red
Light Red
Red
Dark Red
Darker Red
Lightest Orange
Lighter Orange
Light Orange
Orange
Dark Orange
Darker Orange
Lightest Amber
Lighter Amber
Light Amber
Amber
Dark Amber
Darker Amber
Lightest Yellow
Lighter Yellow
Light Yellow
Yellow
Dark Yellow
Darker Yellow
Lightest Lime
Lighter Lime
Light Lime
Lime
Dark Lime
Darker Lime
Lightest Green
Lighter Green
Light Green
Green
Dark Green
Darker Green
Lightest Emerald
Lighter Emerald
Light Emerald
Emerald
Dark Emerald
Darker Emerald
Lightest Teal
Lighter Teal
Light Teal
Teal
Dark Teal
Darker Teal
Lightest Cyan
Lighter Cyan
Light Cyan
Cyan
Dark Cyan
Darker Cyan
Lightest Sky
Lighter Sky
Light Sky
Sky
Dark Sky
Darker Sky
Lightest Blue
Lighter Blue
Light Blue
Blue
Dark Blue
Darker Blue
Lightest Indigo
Lighter Indigo
Light Indigo
Indigo
Dark Indigo
Darker Indigo
Lightest Violet
Lighter Violet
Light Violet
Violet
Dark Violet
Darker Violet
Lightest Purple
Lighter Purple
Light Purple
Purple
Dark Purple
Darker Purple
Lightest Fuchsia
Lighter Fuchsia
Light Fuchsia
Fuchsia
Dark Fuchsia
Darker Fuchsia
Lightest Pink
Lighter Pink
Light Pink
Pink
Dark Pink
Darker Pink
Lightest Rose
Lighter Rose
Light Rose
Rose
Dark Rose
Darker Rose
Active Header Background
Background color for active accordion headers
White
Lightest Gray
Lighter Gray
Light Gray
Gray
Dark Gray
Darker Gray
Lightest Red
Lighter Red
Light Red
Red
Dark Red
Darker Red
Lightest Orange
Lighter Orange
Light Orange
Orange
Dark Orange
Darker Orange
Lightest Amber
Lighter Amber
Light Amber
Amber
Dark Amber
Darker Amber
Lightest Yellow
Lighter Yellow
Light Yellow
Yellow
Dark Yellow
Darker Yellow
Lightest Lime
Lighter Lime
Light Lime
Lime
Dark Lime
Darker Lime
Lightest Green
Lighter Green
Light Green
Green
Dark Green
Darker Green
Lightest Emerald
Lighter Emerald
Light Emerald
Emerald
Dark Emerald
Darker Emerald
Lightest Teal
Lighter Teal
Light Teal
Teal
Dark Teal
Darker Teal
Lightest Cyan
Lighter Cyan
Light Cyan
Cyan
Dark Cyan
Darker Cyan
Lightest Sky
Lighter Sky
Light Sky
Sky
Dark Sky
Darker Sky
Lightest Blue
Lighter Blue
Light Blue
Blue
Dark Blue
Darker Blue
Lightest Indigo
Lighter Indigo
Light Indigo
Indigo
Dark Indigo
Darker Indigo
Lightest Violet
Lighter Violet
Light Violet
Violet
Dark Violet
Darker Violet
Lightest Purple
Lighter Purple
Light Purple
Purple
Dark Purple
Darker Purple
Lightest Fuchsia
Lighter Fuchsia
Light Fuchsia
Fuchsia
Dark Fuchsia
Darker Fuchsia
Lightest Pink
Lighter Pink
Light Pink
Pink
Dark Pink
Darker Pink
Lightest Rose
Lighter Rose
Light Rose
Rose
Dark Rose
Darker Rose
Content Background
Background color for accordion content
White
Lightest Gray
Lighter Gray
Light Gray
Gray
Dark Gray
Darker Gray
Lightest Red
Lighter Red
Light Red
Red
Dark Red
Darker Red
Lightest Orange
Lighter Orange
Light Orange
Orange
Dark Orange
Darker Orange
Lightest Amber
Lighter Amber
Light Amber
Amber
Dark Amber
Darker Amber
Lightest Yellow
Lighter Yellow
Light Yellow
Yellow
Dark Yellow
Darker Yellow
Lightest Lime
Lighter Lime
Light Lime
Lime
Dark Lime
Darker Lime
Lightest Green
Lighter Green
Light Green
Green
Dark Green
Darker Green
Lightest Emerald
Lighter Emerald
Light Emerald
Emerald
Dark Emerald
Darker Emerald
Lightest Teal
Lighter Teal
Light Teal
Teal
Dark Teal
Darker Teal
Lightest Cyan
Lighter Cyan
Light Cyan
Cyan
Dark Cyan
Darker Cyan
Lightest Sky
Lighter Sky
Light Sky
Sky
Dark Sky
Darker Sky
Lightest Blue
Lighter Blue
Light Blue
Blue
Dark Blue
Darker Blue
Lightest Indigo
Lighter Indigo
Light Indigo
Indigo
Dark Indigo
Darker Indigo
Lightest Violet
Lighter Violet
Light Violet
Violet
Dark Violet
Darker Violet
Lightest Purple
Lighter Purple
Light Purple
Purple
Dark Purple
Darker Purple
Lightest Fuchsia
Lighter Fuchsia
Light Fuchsia
Fuchsia
Dark Fuchsia
Darker Fuchsia
Lightest Pink
Lighter Pink
Light Pink
Pink
Dark Pink
Darker Pink
Lightest Rose
Lighter Rose
Light Rose
Rose
Dark Rose
Darker Rose
Accessibility Attributes
Add ARIA attributes for accessibility
Custom Classes
Add your own custom classes to the accordion container
Live Preview
Generated Code
Copy Code