Hey folks 👋
I just built some beautiful, responsive accordion components using TailwindCSS and AlpineJS (with React & Vue support too 🚀).
Perfect for FAQs, collapsible content, and expandable sections — and they’re super easy to drop into any project.
👉 Live Demo + Source: Accordion Components
🔥 Components Included
1. Basic Accordion
A simple, clean accordion perfect for FAQs or basic content organization.
Supports HTML, Vue, and JSX.
2. Plus/Minus Accordion
Accordion with plus/minus icons that smoothly animate between states.
3. Gradient Card Accordion
Colorful gradient cards with icons, shadow animations, and smooth slide effects.
🚀 How to Use
Requirements
- TailwindCSS v4.0+ installed → Install Guide
- AlpineJS (for HTML version)
- Heroicons (optional for icons)
React:
npm install @heroicons/react
Vue:
npm install @heroicons/vue
Top comments (0)