JSFiddle - React, Tailwind, and code Playground
by zlojnaxa
HTML
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
<style>
<body>
{
padding:80px 100px;
background:#F7F7F7;
color:#555;
font:15px/1.6 Tahoma, sans-serif;
}
p {
margin:0;
}
a {
color:#118BF5;
text-decoration:none;
}
/* Switch */
.switch,
.switch-label,
.switch-slider {
width:154px;
height:54px;
}
.switch {
position:relative;
display:inline-block;
margin:0 50px 50px 0;
padding:0;
border:none;
}
.switch-radio {
position:absolute;
visibility:hidden;
}
.switch-label,
.switch-slider {
position:absolute;
top:0;
}
.switch-label {
left:0;
text-indent:-9999px;
}
.switch-slider {
z-index:2;
width:154px;
border-radius:27px;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1) inset,
0 0 4px rgba(0, 0, 0, 0.5) inset,
0 5px 4px 1px rgba(0, 0, 0, 0.3) inset,
0 27px 0 rgba(0, 0, 0, 0.07) inset;
/*-webkit-transition:width 0.2s linear;
-moz-transition:width 0.2s linear;
-o-transition:width 0.2s linear;
transition:width 0.2s linear;*/
}
.switch-slider:after {
position:absolute;
top:1px;
width:52px;
height:52px;
border-radius:50%;
background:#E5E5E5;
background:-webkit-linear-gradient(#D0D0D0, #FDFDFD);
background:-moz-linear-gradient(#D0D0D0, #FDFDFD);
background:-o-linear-gradient(#D0D0D0, #FDFDFD);
background:linear-gradient(#D0D0D0, #FDFDFD);
box-shadow:
0 0 2px 2px #FFF inset,
0 0 4px 1px rgba(0, 0, 0, 0.6);
content:'';
}
.switch-label-on .switch-slider {
...