JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<h1>toggle-switches</h1>
<input type="checkbox" class="toggle-switch">

<input type="checkbox" class="toggle-switch xxs">
<input type="checkbox" class="toggle-switch sm">
<input type="checkbox" class="toggle-switch md">
<input type="checkbox" class="toggle-switch lg">

Square
<input type="checkbox" class="toggle-switch square">

Custom everything
<input type="checkbox" class="toggle-switch long">

SCSS

@mixin toggle-switch($toggleWidth, $toggleHeight, $handleMargin, $roundness, $on-color, $off-color) {
    
    $handleColor: #FFF;
    $handleHeight: $toggleHeight - ($handleMargin * 2);
    $handleWidth: $handleHeight;
    $handleRadius: $handleHeight * $roundness;
    $toggleRadius: ($toggleHeight / 2) * $roundness;
    
    position: relative;
    display: block;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    top: 0;
    left: 0;
    width: $toggleWidth;
    height: $toggleHeight;
    margin: 5px;
    border-radius: $toggleRadius;
    background: $off-color;
    box-sizing: border-box;
    box-shadow: inset 0px 1px 0px rgba(0,0,0,0.2);
    // text-indent: -9999px;

    cursor: pointer;

    //toggle when checked
    &:checked {
        background: #13c92a;
        //border-color: $on-color;
    }

    //handle
    &:after {
        position: absolute;
        @if $roundness < 0.5 { content: '|||'; } @else { content: ''; }
        text-align: center;
        color: rgba(0,0,0,0.1);
        top: $handleMargin;
        left: $handleMargin;
        width: $handleWidth;
        height: $handleHeight;
        border-radius: ($handleRadius / 2);
        transition: 0.3s;
        background: $handleColor;

        box-shadow: 0px 1px 0px 1px rgba(0,0,0,0.25);
    }
    //handle when checked
    &:checked:after {
        left: calc(100% - #{$handleMargin});
        transform: translateX(-100%);
    }

    //handdle when pressed down
    &:active:after {
        width: $handleWidth * 1.5;
    }
    
}

//create your own classes as you wish

input[type="checkbox"].toggle-switch {
	@include toggle-switch(44px, 22px, 1px, 1, blue, gray);
}
input[type="checkbox"].toggle-switch.xxs {
	@include toggle-switch(18px, 12px, 1px, 1, blue, gray);
}
input[type="checkbox"].toggle-switch.sm {
	@include toggle-switch(32px, 16px, 1px, 1, blue, gray);
}
input[type="checkbox"].toggle-switch.lg {
	@include toggle-switch(64px, 32px, 2px, 1, blue,...