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

1.5k

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

6 months ago

862
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.

Author:
Hamza Atig

6 months ago

644
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Author:
Nick Girga

6 months ago

403
Toggle me Animated Switch

Author:
Anonymous

10 months ago

992
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

3 years ago

10.5k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

5 months ago

731
Toggle Switch
Toggle switch for dark mode

Author:
Charlotte Dupont

2 years ago

16.6k
Animated toggle switch

Author:
Samuel Dawson

2 years ago

15.6k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

129
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

8 months ago

1.5k
Elegant toggle switch

Author:
kishan pc

1 year ago

1.8k
Switch tabs button

Author:
gmer33

2 years ago

15.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components