JSFiddle - React, Tailwind, and code Playground

by wamosjk

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <div class="carousel slide" data-ride="carousel" id="slider">

                <ol class="carousel-indicators">
                    <li data-target="#slider" data-slide-to="0" class="active"></li>
                    <li data-target="#slider" data-slide-to="1"></li>
                    <li data-target="#slider" data-slide-to="2"></li>
                    <li data-target="#slider" data-slide-to="3"></li>
                </ol>

                <div class="carousel-inner">

                    <div class="item active"><img src="http://placehold.it/350x150"></div>
                    <div class="item"><img src="http://placehold.it/350x150"></div>
                    <div class="item"><img src="http://placehold.it/350x150"></div>
                    <div class="item"><img src="http://placehold.it/350x150"></div>

                </div>

                <a href="#slider" data-slide="prev" class="left carousel-control">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a href="#slider" data-slide="next" class="right carousel-control">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>

            </div>

CSS

#slider .item {
  height: 250px;
}
#slider .item img{
  width: 100%;
  height: 100%;
}