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 first-item"></div>
                    <div class="item second-item"></div>
                    <div class="item third-item"></div>
                    <div class="item fourth-item"></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 {
  padding-bottom: 50%;
}
#slider .first-item{
  background: url('http://placehold.it/350x150');
  background-size: cover;
  background-position: center;
}
#slider .second-item{
  background: url('http://placehold.it/350x150');
  background-size: cover;
  background-position: center;
}
#slider .third-item{
  background: url('http://placehold.it/350x150');
  background-size: cover;
  background-position: center;
}
#slider .fourth-item{
  background: url('http://placehold.it/350x150');
  background-size: cover;
  background-position: center;
}