Neumorphic Toggle Switch

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

Toggle switch

Author Anonymous

Tailwind v3.4 2.2k 3

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

Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

2 months ago

37
Elegant toggle switch

kishan pc

2 years ago

2.6k
Animated toggle switch

Samuel Dawson

3 years ago

17k
Toggle Switch
Toggle switch for dark mode

Charlotte Dupont

3 years ago

18.2k
Toggle switch
toggle switch with smooth animation

Dika Rahman

2 years ago

4.6k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

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

Nick Girga

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

Muhammad Umair Arshad

1 year ago

1.4k
Toggle me Animated Switch

Anonymous

1 year ago

1.7k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

8 months ago

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

Nishant Trivedi

3 years ago

22.3k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

8 months ago

970