Collection of free Tailwind CSS dropdown components from Codepen and other resources.

Dropdown button: name and e-mail, divider, dashboard, settings, earnings, sign out.

Author

  • zoltanszogyenyi

Links

Made with

  • HTML / CSS / JS

About a code

Tailwind CSS Dropdown

Use this dropdown component to show and hide a menu when clicking on any element using the data attributes from Flowbite.

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

Responsive: yes

Dependencies: flowbite.js

Tailwind version: 2.2.4

Demo image: Select Input

Author

  • JustinPaulLayan

Links

Made with

  • HTML / CSS

About a code

Select Input

Simple but elegant UI.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Select Dropdown

Author

  • maddog986

Links

Made with

  • HTML / CSS / JS

About a code

Select Dropdown

Basic select with dropdown.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Animated Dropdowns

Author

  • Djordje Todorovic

Links

Made with

  • HTML / CSS / JS

About a code

Animated Dropdowns

VueJS and custom CSS animations.

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

Responsive: yes

Dependencies: vue.js

Tailwind version: 2.1.4

Demo image: Pure CSS Dropdown using Focus-within (with Animation)

Author

  • surjithctly

Links

Made with

  • HTML / CSS

About a code

Pure CSS Dropdown using Focus-within (with Animation)

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

Responsive: yes

Dependencies: -

Tailwind version: 2.1.0

Profile picture with profile name, dropdown items: account, setting (with divider), logout.

Author

  • HasanMu

Links

Made with

  • HTML / CSS / JS

About a code

User Dropdown With Icon + Profile Picture

Simple component user dropdown.

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

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.2

Demo image: Pure CSS Dropdown Menu

Author

  • Umair Mirza

Links

Made with

  • HTML / CSS

About a code

Pure CSS Dropdown Menu

A CSS only based dropdown menu for "Sort By" selector.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Options: - Account settings - Support - License - Sign out.

Author

  • tailwindUI

Links

Made with

  • HTML / CSS / JS

About a code

Simple Dropdown

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Options: - Edit - Duplicate - divider - Archive - Move - divider - Share - Add to favorites - divider - Delete.

Author

  • tailwindUI

Links

Made with

  • HTML / CSS / JS

About a code

Dropdowns with Dividers

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Dropdown Simple

Author

  • devdojo

Links

Made with

  • HTML / CSS / JS

About a code

Dropdown Simple

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Multi Level Dropdown With Icons

Author

  • merakiUI

Links

Made with

  • HTML / CSS

About a code

Multi Level Dropdown With Icons

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Dropdown with User Info

Author

  • merakiUI

Links

Made with

  • HTML / CSS

About a code

Dropdown with User Info

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Dropdown User Info with Icons

Author

  • merakiUI

Links

Made with

  • HTML / CSS

About a code

Dropdown User Info with Icons

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Dropdown Notification

Author

  • merakiUI

Links

Made with

  • HTML / CSS

About a code

Dropdown Notification

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Lo-fi Tailwind CSS Dropdown - With Icons

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Dropdown - With Icons

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Lo-fi Tailwind CSS Dropdown - Icon Button

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Dropdown - Icon Button

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Lo-fi Tailwind CSS Dropdown - With Search

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Dropdown - With Search

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Lo-fi Tailwind CSS Dropdown - Basic

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Dropdown - Basic

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Button with arrow. Dropdown items: your profile, your projects, help, settings, sign out.

Author

  • khatabwedaa

Links

Made with

  • HTML / CSS / JS

About a code

Simple Dropdown

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

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.7.0