JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="bg-image">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.hdwallpapers.in/walls/tree_beach_side-wide.jpg" alt="...">
          <div class="carousel-caption">
            First slide label
          </div>
        </div>
        <div class="item">
          <img src="http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg" alt="...">
          <div class="carousel-caption">
            Second slide label
          </div>
        </div>
      </div>
    
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

CSS

.bg-image{
       width: 230px;
    height: 443px;
    background-image: url(http://www.freeiconspng.com/uploads/phone-png-18.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 53px 13px;
}
.carousel-inner>.item>a>img, 
.carousel-inner>.item>img{
     height: 222px;   
}

.carousel, .carousel .item, .carousel-inner, .carousel-inner>.item>a>img, .carousel-inner>.item>img {
      height: 100% !important;
      object-fit: cover;
}

JavaScript

$('.carousel').carousel();