JSFiddle - React, Tailwind, and code Playground

CSS3 Multiple-Choice “Windowed Slider”

by Jennifer Perrin

HTML

<div class="wrapper-2">
  <div class="container list">
    <input type="radio" name="list-radio" id="radio-one" class="radio"/>
    <label for="radio-one"></label>
    <div class="list-item">This is a vertical</div>
    <input type="radio" name="list-radio" id="radio-two" class="radio"  checked/>
    <label for="radio-two"></label>
    <div class="list-item">windowed toggle slider</div>
    <input type="radio" name="list-radio" id="radio-three" class="radio"/>
    <label for="radio-three"></label>
    <div class="list-item">
    using radio buttons</div>
    <input type="radio" name="list-radio" id="radio-four" class="radio"/>
    <label for="radio-four"></label>
    <div class="list-item">
    instead of checkboxes</div>
    <input type="radio" name="list-radio" id="radio-five" class="radio"/>
    <label for="radio-five"></label>
    <div class="list-item">
    to select an option</div>
    <div class="slider slider-list"></div>
  </div>
</div><!--end .wrapper-2-->

CSS

body{
  margin:0 auto;
  text-shadow:1px 1px 0 white;
}
.wrapper-2 {
  float:left;
  margin:30px 60px 100px 50px;
}

.container{
  height:100px; 
  width:240px; 
  margin:10px auto 50px;
  position:Relative;
  padding:2px;
}

.slider{
  width:100px; 
  border:10px solid #9D6E90; 
  height:76px; 
  position:absolute;
  left:4px;
  top:5px;
  background:rgba(9,9,9,0.08);
  transition: all 0.3s ease-out;
}
.radio{
  display:none;
}
label{
  display:block; 
  position:absolute; 
  z-index:999; 
  height:100%; 
  width:100%; 
  cursor:pointer;
}
#check:checked ~ .slider{left:120px;}
#check2:checked ~ .slider2{left:120px;}
#check3:checked ~ .slider3{left:120px;}

.container.list{
  height:300px;
  width:498px;
  background: #dfdfd1;
  color:#555;
}
.list-item{
  display:block;
  float:none;
  width:100%;
  height:42px;
  line-height:40px;
  margin:15px 0;
  text-align:center;
  font: bold 1.5em/1.8 "Helvetica";
  border-radius:40px;
}
.slider-list{
  width:476px;
  height:45px;
  border-color:#2FBFBF;
}
#radio-one:checked ~ .slider-list{top:5px;}
#radio-two:checked ~ .slider-list {top:62px;}
#radio-three:checked ~ .slider-list {top:119px;}
#radio-four:checked ~ .slider-list {top:176px;}
#radio-five:checked ~ .slider-list {top:233px;}