JSFiddle - React, Tailwind, and code Playground

by biznuge

HTML

<ul>
    <li>
      
      <span class='togglebox'>
          <input type='checkbox' id='chkbx'/>
        <label for='chkbx'><strong></strong></label>
      </span>
    </li>
</ul>

CSS

html{ height:100%; }
body{
  font:14px/1 Arial; 
  text-align:center;
  color:#333; 
  background-color:#EEE; 
  height:100%; 
  background:#DDD; 
}
body::after{ content:''; display:inline-block; height:100%; vertical-align:middle; }

*{ margin:0; padding:0; }

			ul{ margin:0; padding:0; list-style:none; display:inline-block; width:300px; text-align:left; vertical-align:middle; }
				ul li{ line-height:30px; overflow:hidden; padding:4px 0; }

/* Actual code goes here */
      .togglebox input{ display:none; }
			.togglebox{ display:inline-block; border:1px solid #BBB; width:40px; height:90px; position:relative; border-radius:20px; color:#FFF; font-weight:bold; overflow:hidden; box-shadow:0 1px 0 #CCC; }
			.togglebox label{ width:40px; height:100%; line-height:200%; border-radius:0.1em; position:absolute; top:0; left:0; z-index:1; font-size:1.1em; cursor:pointer; -webkit-transition:height 0.12s; -moz-transition:height 0.12s; transition:height 0.12s; }
			.togglebox span{ position:absolute; top:-110px; }
			
			.togglebox label::before{ content:'ON'; width:40px; height:50px; float:left; margin-top:00px; padding-top:20px; padding-right:13px; text-align:center; background:#13E27F; text-shadow:0 -1px 0px #093B5C; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; }

			.togglebox label strong{ display:block; height:40px; width:40px; float:left; position:relative; z-index:1; border:1px solid #AAA; background:#F6F6F6; box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5); border-radius:20px; margin-top:-20px; margin-left:-1px; }
			.togglebox label:hover strong{ background:#E5E5E5; }
				.togglebox label::after{ content:'OFF'; width:40px; float:left;height:50px; padding-top:20px; padding-left:0px; text-align:center; background:#E70A25; box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset; margin-top:-20px;}
			.togglebox input:checked ~ label{ top:-50px; }