JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="slides">
  <input checked type="radio" name="slider" id="slide1" class="set" />
  <input type="radio" name="slider" id="slide2" class="set" />
  <input type="radio" name="slider" id="slide3" class="set" />
  <input type="radio" name="slider" id="slide4" class="set" />  
		  
  <div class="mask">
    
    <div class="overflow">
      
      <div class="slide">
      	<h3>Slider 1</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
      </div>
       <div class="slide">
      	<h3>Slider 2</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic</p>
      </div>
       <div class="slide">
      	<h3>Slider 3</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic</p>
      </div>
       <div class="slide">
      	<h3>Slider 4</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic</p>
      </div>
      
    </div>
    
  </div>


  <div...

CSS

html { background:radial-gradient(#238dbb, #114476);   }
body{
font-family:Helvetica; 
font-size:15px; 
color:#134c7e;	
text-align:center;
 height:100%;
}

input.set { display:none; }
#slide1:checked ~ .mask .overflow { margin-left:0; }
#slide2:checked ~ .mask .overflow { margin-left:-100%; }
#slide3:checked ~ .mask .overflow { margin-left:-200%; }
#slide4:checked ~ .mask .overflow { margin-left:-300%; }
#slides { margin:50px auto; width:80%; position:relative; }
#slides .mask { width:90%; overflow:hidden; margin:auto; }
#slides .overflow { width:400%; -webkit-transform:translateZ(0); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; }
#slides .slide {
    background: #fff none repeat scroll 0 0;
    float: left;
    height: 200px;
    line-height: normal;
    padding: 1%;
    width: 23%;
}
#slides .slide {
	line-height:25px;	
}
#controls { width:100%; }

#controls label { display:none; width:5%; height:60px; opacity:0.3; position:absolute; top:50%; margin-top:-30px; cursor:pointer; background:#000; }

#controls label:hover { opacity:0.8; }

#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4) { right:0; display:block; }

#slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3) { left:0; display:block; }