JSFiddle - React, Tailwind, and code Playground
by von
HTML
<div class="carousel slide" id="carousel-359129">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#carousel-359129">
</li>
<li data-slide-to="1" data-target="#carousel-359129">
</li>
<li data-slide-to="2" data-target="#carousel-359129">
</li>
<li data-slide-to="3" data-target="#carousel-359129" class="active">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100" alt="Carousel Bootstrap First" src="https://www.layoutit.com/img/sports-q-c-1600-500-1.jpg" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="carousel-item active carousel-item-left">
<img class="d-block w-100" alt="Carousel Bootstrap Second" src="https://www.layoutit.com/img/sports-q-c-1600-500-2.jpg" />
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="carousel-item carousel-item-next carousel-item-left">
<img class="d-block w-100" alt="Carousel Bootstrap Third" src="https://www.layoutit.com/img/sports-q-c-1600-500-3.jpg" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div> <a class="carousel-control-prev" href="#carousel-359129"...