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

Related Articles:

  1. CSS Toggle Switches
  2. Bootstrap Toggle Switches
  3. jQuery Toggle Switches

Author

  • Huda Damar

Links

Made with

  • HTML / CSS / JS

About a code

Switch to Darkmode

Cool switch button for switch to darkmode.

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

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Author

  • vishnumohanrk

Links

Made with

  • HTML / CSS

About a code

Toggle Component

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.3

Demo image: Switch Toggle

Author

  • kurja

Links

Made with

  • HTML / CSS

About a code

Switch Toggle

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.3

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #1

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #2

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #3

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #4

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #5

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #6

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #7

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #8

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • TailGrids

Links

Made with

  • HTML / CSS

About a code

Toggle Button Style #9

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Toggle Switch #10

Author

  • Mamba UI

Links

Made with

  • HTML / CSS

About a code

Toggle Switch #10

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Toggle Switch #11

Author

  • Mamba UI

Links

Made with

  • HTML / CSS

About a code

Toggle Switch #11

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Toggle Switch #12

Author

  • Mamba UI

Links

Made with

  • HTML / CSS

About a code

Toggle Switch #12

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Toggle Switch #13

Author

  • Mamba UI

Links

Made with

  • HTML / CSS

About a code

Toggle Switch #13

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

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Author

  • emotionl

Links

Made with

  • HTML / CSS

About a code

Toggle

A custom toggle.

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

Responsive: yes

Dependencies: -

Tailwind version: 1.9.6

Author

  • Rob Stinson

Links

Made with

  • HTML / CSS

About a code

Lo-fi Tailwind CSS Toggles

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

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Author

  • Hernanarica

Links

Made with

  • HTML / CSS / JS

About a code

Switch Button

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

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Author

  • r-freeman

Links

Made with

  • HTML / CSS / JS

About a code

Toggle

iOS-like toggle button.

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

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.2.0