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.8k

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

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

11 months ago

1k
Toggle me Animated Switch

Author:
Anonymous

1 year ago

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

Author:
Nick Girga

11 months ago

806
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

1 year ago

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

Author:
Alif Bima Pradana

2 months ago

357
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

10 months ago

1.2k
Toggle switch
toggle switch with smooth animation

Author:
Dika Rahman

1 year ago

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

11 months ago

1.1k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

3 months ago

393
Switch tabs button

Author:
gmer33

3 years ago

16.8k
Elegant toggle switch

Author:
kishan pc

1 year ago

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

Author:
TailwindFlex

3 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components