JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<input type="checkbox" id="checkbox1" class="oval" />
<label class="toggler" for="checkbox1"></label>

<input type="checkbox" id="checkbox2" class="oval" />
<label class="saxrunikangsa red" for="checkbox2"></label>

<input type="checkbox" id="checkbox3" class="oval" />
<label class="saxrunikangsa orange" for="checkbox3"></label>

<input type="checkbox" id="checkbox4" class="oval" />
<label class="saxrunikangsa rukursa" for="checkbox4"></label>

<input type="checkbox" id="checkbox5" class="oval" />
<label class="saxrunikangsa blue" for="checkbox5"></label>

CSS

input[type=checkbox].oval{
	visibility: hidden;
}

label.saxrunikangsa {
    width: 80.7px;
    height: 34.9px;
    position: relative;
    display: block;
    border-radius: 25px;
    box-shadow: 8px 2px 8px rgba(14, 14, 14, 0.81) inset, -7px 1px 8px rgba(12, 12, 12, 0.85) inset;
    left: 0;
    top: 0;
    background: #807777;
    z-index: 50;
    font: bold 12px Arial;
    cursor: pointer;
}

label.saxrunikangsa::before {
    text-shadow: 0 -2px 1px #5d5757;
    content: 'OFF';
    position: absolute;
    color: #f1e8e8;
    top: 11px;
    left: 59%;
}

label.saxrunikangsa::after{ /* Round Knob "off" state */
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	box-shadow: 0 5px 10px rgba(0,0,0,.5), 2px -5px 5px rgba(0,0,0,.2) inset;
	position: absolute;
	top: -5px;
	left: 0px;
	background: rgb(255,255,255); /* knob style gradient */
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(224,224,224,1) 37%, rgba(186,186,186,1) 38%, rgba(244,244,244,1) 48%, rgba(252,252,252,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(37%,rgba(224,224,224,1)), color-stop(38%,rgba(186,186,186,1)), color-stop(48%,rgba(244,244,244,1)), color-stop(100%,rgba(252,252,252,1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1) 48%,rgba(252,252,252,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(224,224,224,1) 37%,rgba(186,186,186,1) 38%,rgba(244,244,244,1)...