JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div id="homepage-slider" class="aura_slider">

    <input type="radio" class="cs_anchor radio" name="slider" id="slide1"/>
    <input type="radio" class="cs_anchor radio" name="slider" id="slide2"/>
    <input type="radio" class="cs_anchor radio" name="slider" id="slide3"/>
    <input type="radio" class="cs_anchor radio" name="slider" id="play1" checked=""/>

    <div class="images">
       <div class="images-inner">
        <div class="image-slide">
         <img src="https://unsplash.it/1200/800?image=1015">
        </div>
        <div class="image-slide">
         <img src="https://unsplash.it/1200/800?image=944">
        </div>
        <div class="image-slide">
          <img src="https://unsplash.it/1200/800?image=877">
        </div>
      </div>
    </div>
  
    <div class="labels">
        <label for="slide1" class="label">text slide 1</label>
        <label for="slide2" class="label">text slide 2</label>
        <label for="slide3" class="label">text slide 3</label>
      
        <div class="fake-radio">
          <label for="slide1" class="radio-btn"></label>
          <label for="slide2" class="radio-btn"></label>
          <label for="slide3" class="radio-btn"></label>
        </div>
    </div>
	<div class="control previous">
<label class="numb1" for="slider_1"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">

<path d="M213.7 256L380.9 81.9c4.2-4.3 4.1-11.4-.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-.2L131.1 247.9c-2.2 2.2-3.2 5.2-3 8.1-.1 3 .9 5.9 3 8.1l204.2 212.7c4.2 4.3 11.2 4.2 15.5-.2l29.9-30.6c4.3-4.4 4.4-11.5.2-15.8L213.7 256z"></path></svg>
</label>
<label class="numb2" for="slider_2"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">

<path d="M213.7 256L380.9 81.9c4.2-4.3 4.1-11.4-.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-.2L131.1 247.9c-2.2 2.2-3.2 5.2-3 8.1-.1 3 .9 5.9 3 8.1l204.2 212.7c4.2 4.3 11.2 4.2 15.5-.2l29.9-30.6c4.3-4.4 4.4-11.5.2-15.8L213.7 256z"></path></svg>
</label>
<label class="numb3"...

CSS

#slider_1:target  ~.images .images-inner {
	   margin-left: 0;
            }
.image {
  width: 100%;
  height: 200px;
}
.radio {
  display: none;
}
.images {
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 300px;
}
.images-inner {
  width: 500%;
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.image-slide {
  width: 20%;
  float: left;
}
.image-slide,
.fake-radio,
.radio-btn {
  transition: all 0.5s ease-out;
}
.fake-radio {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}
.control {
    position: absolute;
    z-index: 55;
    top: 0;
    bottom: 0;
    width: 15%;
    opacity: .5;
    display: none;
}
.control label {
    z-index: 0;
    display: none;
    cursor: pointer;
    opacity: .5;
    position: absolute;
    text-decoration: none;
    cursor: pointer;
    line-height: inherit;
    vertical-align: middle;
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: normal;
    top: 42%;
}
.previous label {
    left: 15%;
    top: 44%;
}
.control label svg {
    width: 48px;
    height: 48px;
    fill: #fff;
    stroke: currentColor;
    stroke-width: 0;
}
.control label svg:hover {
    transition: all .2s ease;
    fill: #000;
}
.next label {
    right: 15%;
    top: 44%;
}




	
			



.labels .label{
	    position: absolute;
	    bottom: 50px;
	    width: 100%;
	    left: 0;
	    text-align: center;
	    z-index: 1000;
	    display: none;
}


.next {
    right: 0%;
	    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
    background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}

.previous {
	    left: 0;
   ...