JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<section class="cr-container">   
 
 <!-- radio buttons and labels -->
 <input id="http://3.bp.blogspot.com/-RSkEiPJ5MDE/UtTbHIGFLzI/AAAAAAAAAVc/inXN83SDKck/s1600/Accordion-Style-Slider-dengan-CSS.png" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
 <label for="select-img-1" class="cr-label-img-1">1</label>
 
 <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
 <label for="select-img-2" class="cr-label-img-2">2</label>
 
 <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
 <label for="select-img-3" class="cr-label-img-3">3</label>
 
 <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
 <label for="select-img-4" class="cr-label-img-4">4</label>
 
 <div class="clr"></div> 
 
 <!-- panels -->
 <div class="cr-bgimg">
  <div>
   <span>http://3.bp.blogspot.com/-RSkEiPJ5MDE/UtTbHIGFLzI/AAAAAAAAAVc/inXN83SDKck/s1600/Accordion-Style-Slider-dengan-CSS.png1</span>
   <span>http://3.bp.blogspot.com/-RSkEiPJ5MDE/UtTbHIGFLzI/AAAAAAAAAVc/inXN83SDKck/s1600/Accordion-Style-Slider-dengan-CSS.png</span>
   <span>http://3.bp.blogspot.com/-RSkEiPJ5MDE/UtTbHIGFLzI/AAAAAAAAAVc/inXN83SDKck/s1600/Accordion-Style-Slider-dengan-CSS.png</span>
   <span>http://3.bp.blogspot.com/-RSkEiPJ5MDE/UtTbHIGFLzI/AAAAAAAAAVc/inXN83SDKck/s1600/Accordion-Style-Slider-dengan-CSS.png</span>
  </div>
  <div>
   <span>Slice 2 - Image 1</span>
   <span>Slice 2 - Image 2</span>
   <span>Slice 2 - Image 3</span>
   <span>Slice 2 - Image 4</span>
  </div>
  <div>
   <span>Slice 3 - Image 1</span>
   <span>Slice 3 - Image 2</span>
   <span>Slice 3 - Image 3</span>
   <span>Slice 3 - Image 4</span>
  </div>
  <div>
   <span>Slice 4 - Image 1</span>
   <span>Slice 4 - Image 2</span>
   <span>Slice 4 - Image 3</span>
   <span>Slice 4 - Image 4</span>
  </div>
 </div>
 
 <!-- titles -->
 <div class="cr-titles">
  <h3>
   <span>Serendipity</span>
   <span>What you've been dreaming of</span>
 ...

CSS

.cr-container{
 width: 600px;
 height: 400px;
 position: relative;
 margin: 0 auto;
 border: 20px solid #fff;
 box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.cr-container label{
 font-style: italic;
 width: 150px;
 height: 30px;
 cursor: pointer;
 color: #fff;
 line-height: 32px;
 font-size: 24px;
 float:left;
 position: relative;
 margin-top: 350px;
 z-index: 1000;
}
.cr-container label:before{
 content:'';
 width: 34px;
 height: 34px;
 background: rgba(130,195,217,0.9);
 position: absolute;
 left: 50%;
 margin-left: -17px;
 border-radius: 50%;
 box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
 z-index:-1;
}
.cr-container label:after{
 width: 1px;
 height: 400px;
 content: '';
 background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 position: absolute;
 bottom: -20px;
 right: 0px;
}
.cr-container label.cr-label-img-4:after{
 width: 0px;
}
.cr-container input{
 display: none;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
 color: #68abc2;
}
.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
 background: #fff;
 box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
}
.cr-bgimg{
 width: 600px;
 height: 400px;
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 1;
 background-repeat: no-repeat;
 background-position: 0 0;
}
.cr-bgimg div{
 width: 150px;
 height: 100%;
 position: relative;
 float: left;
 overflow: hidden;
 background-repeat: no-repeat;
}
.cr-bgimg div span{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0px;
 left: -150px;
 z-index:...