JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <body>

    
         <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
      <!-- 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 kt_slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">

          <div class="container">
            <div class="carousel-caption">
              <h1>slide 1</h1>
              <p></p>

            </div>
  
          </div>
      </div>


        <div class="item">

          <img class="second-slide kt_slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">

          <div class="container">
            <div class="carousel-caption">
              <h1>slide 2</h1>
              <p></p>

            </div>
          </div>
        </div>
        <div class="item">

          <img class="third-slide kt_slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">

          <div class="container">
            <div class="carousel-caption">
              <h1>slide 3</h1>
              <p></p>
            </div>
          </div>
        </div>
      </div>

    </div><!-- /.carousel -->
         <div class="container kt_sideborder kt_paddingfix carousel" id="kt_carcontr">
      <a class="left carousel-control"...

CSS

@media (max-width: 991px) {
  a.carousel-control{
    visibility: hidden;
  }

  #kt_carcontr{
  	visibility: hidden;
  	display: none;
  }

}

@media (min-width: 869px) {
  .container {
    width: 750px;
  }

}
@media (min-width: 1092px) {
  .container {
    width: 970px;
  }
  #kt_tiles{
  	height: 970px;
  }
	.kt_tile_text p {
		font-size: 10px ;
	}
}

@media (min-width: 1300px) {
  .container {
    width: 1170px;
  }

 }

.carousel {
  min-height: 500px;
}
/* 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: auto;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

.carousel-indicators li {
    width: 40px;
    height: 40px;
    margin: 0px;
    background-color: #337AB7;
    border-radius: 20px;
    margin-left: 20px;

}

.carousel-indicators .active {
	width: 40px;
    height: 40px;
    margin: 0px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 20px;
    margin-left: 20px;
}

#kt_carcontr
{
	background: rgba(0,0,0,0.5);
	margin: auto;
	top: 0; left: 0; right: 0;
	z-index: 1;
	position: absolute;
}

.carousel-control
{
	
	width: 50px;
	filter: alpha(opacity=70);
	opacity: 70;

}

.carousel-control:focus
{
	filter: alpha(opacity=70);
	opacity: 70;
}

.carousel-control.left
{
	width: 50px;
	left:-50px;
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.7) 100%);
	background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.7) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.7)));
	background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.7) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
	background-repeat:...