JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/3/cosmo/bootstrap.min.css">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <div style="background-image:url('https://picsum.photos/400/200/?random&1');"></div>
              </div>

              <div class="item">
                <div style="background-image:url('https://picsum.photos/400/200/?random&2');"></div>
              </div>

              <div class="item">
                <div style="background-image:url('https://picsum.photos/400/200/?random&3');"></div>
              </div>
            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>

CSS

.carousel-inner {
                height: 65vh;
                min-height: 350px;
                position: relative;
              }
              .item { height: 100%; }
              .item > div {
                height: 100%;
                width: 100%;
                background-size: cover;
              }