JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-10 col-lg-10 col-sm-10">
        <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>   
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img class="first-slide" src="images/service.png" alt="First slide">
              <div class="container">         
                <div class="carousel-caption">
                  <h1>Place Holder</h1>
                  <p>Place Holder</p>
                </div>
              </div>
            </div>
            <div class="item">
              <img class="second-slide" src="images/classic.png" alt="Second slide"> 
              <div class="container">            
                <div class="carousel-caption">
                  <h1>Place Holder</h1>
                  <p>Place Holder</p>
                </div>
              </div>
            </div>               
            <div class="item">
              <img class="third-slide" src="images/new2016.png" alt="Third slide">
              <div class="container">           
                <div class="carousel-caption">                
                  <h1>PH</h1>
                  <p>PH</p>
                </div>
              </div>
            </div>
                    <div class="item">
              <img class="second-slide" src="images/a6lease.png" alt="Second slide">
              <div class="container">
                <div class="carousel-caption">
      ...

CSS

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}