JSFiddle - React, Tailwind, and code Playground
HTML
<div class="carousel">
<ul style="width: 654px;" class="slides">
<li class="slide">
<div class="img-wrapper">
<img src="assets/img/agouti-teeth.png" alt="Agouti Teeth">
</div>
<div class="caption">Agouti Teeth</div>
</li>
<li class="slide">
<div class="img-wrapper">
<img src="assets/img/chipmunk-tail.png" alt="Chipmunk Tail">
</div>
<div class="caption"> Chipmunk Tail </div>
</li>
<li class="slide">
<div class="img-wrapper">
<img src="assets/img/birds-nest.png" alt="Bird's Nest">
</div>
<div class="caption"> Bird's Nest </div>
</li>
<li class="slide">
<div class="img-wrapper">
<img src="assets/img/agouti-teeth.png" alt="Agouti Teeth">
</div>
<div class="caption"> Agouti Teeth </div>
</li>
<li class="slide">
<div class="img-wrapper">
<img src="assets/img/chipmunk-tail.png" alt="Chipmunk Tail">
</div>
<div class="caption"> Chipmunk Tail </div>
</li>
<li class="slide">
<div class="img-wrapper">
<img src="assets/img/birds-nest.png" alt="Bird's Nest">
</div>
<div class="caption"> Bird's Nest </div>
</li>
</ul>
</div>
CSS
.carousel {
position: relative;
overflow: hidden;
}
.carousel .slides {
list-style: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.carousel .slides .slide {
display: inline-block;
background-color: #F0F0F0;
margin: 0 2px;
width: 105px;
}
.carousel .slides .slide .caption {
background-color: #D0D0D0;
text-align: center;
}