JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carousel slide" id="myCarousel4">
		<div class="carousel-inner">
			<div class="item item1 active">
				<div class="container">
					<div class="carousel-caption"></div>
				</div>
			</div>
			<div class="item item2">
				<img class="img-responsive">
				<div class="container">
					<div class="carousel-caption"></div>
				</div>
			</div>
			<div class="item item3">
				<img class="img-responsive">
				<div class="container">
					<div class="carousel-caption"></div>
				</div>
			</div>
			<div class="item item4">
				<img class="img-responsive">
				<div class="container">
					<div class="carousel-caption"></div>
				</div>
			</div>
			<div class="item item5">
				<img class="img-responsive">
				<div class="container">
					<div class="carousel-caption"></div>
				</div>
			</div>
			<div class="item item6">
				<img class="img-responsive">
				<div class="container">
					<div class="carousel-caption"></div>
				</div>
			</div>
		</div><a class="left carousel-control" data-slide="prev" href="#myCarousel4"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" data-slide="next" href="#myCarousel4"><i class="glyphicon glyphicon-chevron-right"></i></a>
	</div>

CSS

.item1 {
    	background-image: url('/wp-content/uploads/2016/11/1.jpg')
    }
    .item2 {
    	background-image: url('/wp-content/uploads/2016/10/6.jpg')
    }
    .item3 {
    	background-image: url('/wp-content/uploads/2016/10/5.jpg')
    }
    .item4 {
    	background-image: url('/wp-content/uploads/2016/10/3.jpg')
    }
    .item5 {
    	background-image: url('/wp-content/uploads/2016/10/2.jpg')
    }
    .item6 {
    	background-image: url('/wp-content/uploads/2016/10/1.jpg')
    }
    @media all and (max-width: 600px) {
    	.item, .item1, .item2, .item3, .item4, .item5, .item6, #myCarousel4, #myCarousel 4 div {
    		display: none
    	}
    }