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

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

Material 3 Switches [Light]
Switches that conform to Google's Material 3 design guidelines

Author:
Nick Girga

1 month ago

152
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

19.1k
Elegant toggle switch

Author:
kishan pc

1 year ago

1.5k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

2 months ago

273
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

2 years ago

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

4 months ago

866
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

3.2k
Animated toggle switch

Author:
Samuel Dawson

2 years ago

14.8k
Toggle button

Author:
Matthew Chen

1 year ago

12k
Toggle me Animated Switch

Author:
Anonymous

6 months ago

690
Switch tabs button

Author:
gmer33

2 years ago

15.1k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

1 month ago

225

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components