JSFiddle - React, Tailwind, and code Playground

HTML

<article id="slider">
    <label class="label" for="slide1" style="width:50px"  ></label>
    <label class="label" for="slide2">Clica aqui para o slide 2</label>
    <label class="label" for="slide3">Clica aqui para o slide 3</label>
    <label class="label" for="slide4">Clica aqui para o slide 4</label>
        <label class="label" for="slide5">Clica aqui para o slide 5</label>

        <!-- MaxWidth Options -->
        
        <div class="respond"> 
        </div> <!-- .respond -->
        <!-- Slider Setup -->
    
        <input checked="" type="radio" name="slider" id="slide1">
        <input type="radio" name="slider" id="slide2" selected="false">
        <input type="radio" name="slider" id="slide3" selected="false">
        <input type="radio" name="slider" id="slide4" selected="false">
        <input type="radio" name="slider" id="slide5" selected="false">
    
    
        <!-- The Slider -->
        
        <div id="slides">
        
            <div id="overflow">
            
                <div class="inner">
                
                    <article>
                        <img src="http://csscience.com/responsiveslidercss3/CouldDragonByBjzaba.png">
                    </article>
                    
                    <article>
                        <img src="http://csscience.com/responsiveslidercss3/MountainFortByBjzaba.png">
                    </article>
                    
                    <article>
                        <img src="http://csscience.com/responsiveslidercss3/MountainOutpostByBjzaba.png">
                    </article>
                    
                    <article>
                        <img src="http://csscience.com/responsiveslidercss3/CliffsByBjzaba.png">
                    </article>
                    
                    <article>
                        <img src="http://csscience.com/responsiveslidercss3/HillFortByBjzaba.png">
                    </article>
                    
               ...

CSS

#slide1:checked ~ #slides .inner { margin-left:0; }
    #slide2:checked ~ #slides .inner { margin-left:-100%; }
    #slide3:checked ~ #slides .inner { margin-left:-200%; }
    #slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }
#slider{
max-width: 960px;
}
#overflow{
overflow: hidden;
}
#slides article{
float: left;
    width: 20%;
    position: relative,
}
#slides .inner{
width: 500%;
transition: .6s linear;
-moz-transition: .6s linear; /* Firefox 4 */
-webkit-transition: .6s linear; /* Safari and Chrome */
-o-transition: .6s linear; /* Opera */
}
#slides article img{
width: 100%;
}
.label{
display: block;
    height: 20px;
    width: 220px;
   border: 1px solid blue;
}