JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<input type="radio" name="slide" id="slide-1" checked="checked">
<input type="radio" name="slide" id="slide-2">
<input type="radio" name="slide" id="slide-3">
<input type="radio" name="slide" id="slide-4">
<div class="carousel">
    <div class="photo-1"></div>
    <div class="photo-2"></div>
    <div class="photo-3"></div>
    <div class="photo-4"></div>
</div>

<div class="slide-nav">
    <label for="slide-1" class="slide-1">1</label>
    <label for="slide-2" class="slide-2">2</label>
    <label for="slide-3" class="slide-3">3</label>
    <label for="slide-4" class="slide-4">4</label>
</div>

CSS

.carousel{
    display:block;
    width:100%;
    height:200px;
    position:relative;
    overflow:hidden;
}
.carousel div{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    left:100%;
}
.photo-1{
   background:rgb(150, 20, 20); 
}
.photo-2{
   background:rgb(20, 150, 20); 
}
.photo-3{
   background:rgb(20, 20, 150); 
}
.photo-4{
   background:rgb(20, 150, 150); 
}
#slide-1:checked ~ .carousel .photo-1{
    left:0;
}
#slide-2:checked ~ .carousel .photo-2{
    left:0;
}
#slide-3:checked ~ .carousel .photo-3{
    left:0;
}
#slide-4:checked ~ .carousel .photo-4{
    left:0;
}