JSFiddle - React, Tailwind, and code Playground

by Govinda Shrikanth

HTML

<div class="carousel slide" data-ride="carousel" id="myCarousel">
	    <ul class="carousel-indicators">
	        <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
	        <li data-target="#myCarousel" data-slide-to="1"></li>
	        <li data-target="#myCarousel" data-slide-to="2"></li>
	        <li data-target="#myCarousel" data-slide-to="3"></li>
	    </ul>
	    <div class="carousel-inner">
	        <div class="item active">
	            <img src="http://fakeimg.pl/900x300/ff0000,128/000,255" class="img-responsive">
	        </div>
	        <div class="item">
	           <img src="http://fakeimg.pl/900x300/ff0000,128/000,255" class="img-responsive">
	        </div>
	        <div class="item">
	            <img src="http://fakeimg.pl/900x300/eee" class="img-responsive">
	        </div>
	        <div class="item">
	            <img src="http://fakeimg.pl/900x300/ff0000,128/000,255" class="img-responsive">
	        </div>
	    </div>
	    <a href="#myCarousel" class="left carousel-control" data-slide="prev">
	        <span class="glyphicon glyphicon-chevron-left"></span>
	    </a>
	    <a href="#myCarousel" class="right carousel-control" data-slide="next">
	        <span class="glyphicon glyphicon-chevron-right"></span>
	    </a>
	</div>