Home
Anonymous
Neumorphic Toggle Switch

Neumorphic Toggle Switch

This tailwind example is contributed by Anonymous, on 14-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Toggle switch

Author Anonymous

572

Fork Fullscreen

<div class="flex items-center">
  <span class="mr-3 text-gray-600">Dark Mode</span>
  <label for="toggle" class="flex items-center cursor-pointer">
            <div class="relative">
                <input type="checkbox" id="toggle" class="sr-only" onchange="toggleDarkMode(this)"/>
                <div class="block bg-gray-300 w-14 h-8 rounded-full shadow-neumorphic-toggle-outset transition-all duration-300 ease-in-out"></div>
                <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition-transform duration-300 ease-in-out"></div>
            </div>
        </label>
</div>

if (checkbox.checked) {
            toggleTrack.classList.remove('shadow-neumorphic-toggle-outset');
            toggleTrack.classList.add('bg-blue-500', 'shadow-neumorphic-toggle-inset');
            toggleDot.classList.add('translate-x-6');
        } else {
            toggleTrack.classList.remove('bg-blue-500', 'shadow-neumorphic-toggle-inset');
            toggleTrack.classList.add('shadow-neumorphic-toggle-outset');
            toggleDot.classList.remove('translate-x-6');
        }
    }
</script>

Related Examples

Toggle me Animated Switch

Author:
Anonymous

3 months ago

469
Switch tabs button

Author:
gmer33

2 years ago

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

Author:
TailwindFlex

2 years ago

10k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

11 months ago

2.7k
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

18k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

2 months ago

438
Toggle Switch
Toggle switch for dark mode

Author:
Charlotte Dupont

2 years ago

15k
Animated toggle switch

Author:
Samuel Dawson

2 years ago

14.2k
Toggle button

Author:
Matthew Chen

1 year ago

11.7k
Elegant toggle switch

Author:
kishan pc

11 months ago

1.3k
tailwind loading animation
Spinner component provides a dynamic loader indicator with animated

Author:
Menna Bashir

2 months ago

475
Simple count down timer

Author:
Alfredo Pineda Hernández

1 year ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components