JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<input type="checkbox" class="toggle" id="myToggle" name="myToggle" />
<label for="myToggle" class="toggle-label"></label>

CSS

.toggle {
  display: none;
}
.toggle-label {
	position: relative;
}

.toggle-label:before {
	background: white;
	border: 3px solid white;
	border-radius: 50px;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.25), 0 0 10px rgba(0,0,0,0.25);
	content: '';
	display: block;
	height: 50px;
	position: relative;
	transition: all 0.25s;
	width: 75px;
	z-index: 1;
}
.toggle-label:after {
	background-color: #FFF;
	border-radius: 100px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	content: '';
	display: block;
	height: 40px;
	left: 8px;
	position: absolute;
	transition: all 0.25s;
	top: 8px;
	width: 40px;
	z-index: 21;
}
:checked + .toggle-label:before {
	background-color: #0D0;
}
:checked + .toggle-label:after {
	left: 33px;
}