Home
kishan pc
Elegant toggle switch

Elegant toggle switch

This tailwind example is contributed by kishan pc, on 30-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Toggle switch

Author kishan pc

1.1k

2

Fork Fullscreen

<div class="bg-gray-800 h-screen flex items-center justify-center ">
  <div class="space-x-3">
    <label for="select1" class="relative inline-flex cursor-pointer items-center">
    <input type="checkbox" id="select1" class="peer sr-only" />
    <div class="h-6 w-11 rounded-full bg-gray-400 after:absolute after:top-0.5 after:left-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-all after:content-[''] hover:bg-gray-200 peer-checked:bg-primary-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-primary-200 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-100 peer-disabled:after:bg-gray-50"></div>
  </label>
  </div>
</div>

<script>
  // Automatically toggle checkbox
    window.onload = function() {
      var checkbox = document.getElementById("select1");
      checkbox.checked = true; // Initial state
      setInterval(function() {
        checkbox.checked = !checkbox.checked;
      }, 1000); // Toggle every 1 second (1000 milliseconds)
    };
</script>

Related Examples

Neumorphic Toggle Switch

Author:
Anonymous

4 days ago

12
Switch tabs button

Author:
gmer33

1 year ago

13.2k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

1 year ago

15.6k
Toggle me Animated Switch

Author:
Anonymous

4 days ago

56
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

7 months ago

1.6k
Animated toggle switch

Author:
Samuel Dawson

1 year ago

13.2k
Toggle Switch
Toggle switch for dark mode

Author:
Charlotte Dupont

1 year ago

13.8k
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

2 years ago

9.6k
Toggle button

Author:
Matthew Chen

1 year ago

10.9k
Credit card mockup

Author:
Kofi Osei

1 year ago

11.3k
Animated toggle switch

Author:
Samuel Dawson

1 year ago

13.2k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.9