Collection of free Tailwind CSS accordion code examples from Codepen and other resources.

Related Articles

  1. CSS Accordions
  2. Bootstrap Accordions
  3. jQuery Accordions
  4. React Accordions
  5. HTML <details> & <summary> with CSS

Author

  • Cameron

Links

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Horizontal Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Tailwind version: 3.0.24

Demo image: Accordian Tailwind

Author

  • Abhishek Dana

Links

Made with

  • HTML / CSS / JS

About a code

Accordian Tailwind

Simple accordian with Tailwind remove apline.js if using any framework like Angular, React.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 3.0.18

Demo image: Accordion with Tailwindcss

Author

  • Saad Hasan

Links

Made with

  • HTML / CSS / JS

About a code

Accordion with Tailwindcss

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Tailwind version: 3.0.18

Demo image: Tailwind CSS Accordion

Author

  • zoltanszogyenyi

Links

Made with

  • HTML / CSS / JS

About a code

Tailwind CSS Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: flowbite.js

Tailwind version: 3.0.18

Demo image: A Collapsibles Accordion

Author

  • Diyar

Links

Made with

  • HTML / CSS / JS

About a code

A Collapsibles Accordion

This is a collapsibles accordion, responsive with Tailwind and JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Smooth Accordion with Tailwind & CSS

Author

  • hafidm93

Links

Made with

  • HTML / CSS

About a code

Smooth Accordion with Tailwind & CSS

Tailwindcss component without Javascript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Author

  • Tailwind Toolbox

Links

Made with

  • HTML / CSS / JS

About a code

Accordion

Pure CSS collapsible/accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: TailwindCSS + SCSS Simple Accordion

Author

  • George Gabriel

Links

Made with

  • HTML / CSS (SCSS)

About a code

TailwindCSS + SCSS Simple Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.17

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-Fi Tailwind CSS Accordion Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Pure CSS Accordion

Author

  • frontendfunn

Links

Made with

  • HTML / CSS

About a code

Pure CSS Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Tailwind version: 1.4.6

Demo image: Collapsible/Accordion

Author

  • jumpshoxx

Links

Made with

  • HTML / CSS

About a code

Collapsible/Accordion

A collapsible component made with Tailwind.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0