JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	

		<!--  Carousel - consult the Twitter Bootstrap docs at 
		  http://twitter.github.com/bootstrap/javascript.html#carousel -->
	<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
	  <div class="carousel-inner">
		<div class="item active"><!-- class of active since it's the first item -->
	
		  <div class="carousel-caption">
			<p>Caption text here1</p>
		  </div>
		</div>
		<div class="item">
		 
		  <div class="carousel-caption">
			<p>Caption text here2</p>
		  </div>
		</div>
		<div class="item">

		  <div class="carousel-caption">
			<p>Caption text here3</p>
		  </div>
		</div>
		<div class="item">
		 
		  <div class="carousel-caption">
			<p>Caption text here4</p>
		  </div>
		</div>
	  </div><!-- /.carousel-inner -->
	  <!--  Next and Previous controls below
			href values must reference the id for this carousel -->
		<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
		<a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
	</div><!-- /.carousel -->
	
	<script src="js/jquery.min.js"></script>	
	<script src="js/bootstrap.min.js"></script>
	
	<script>
	  $(document).ready(function(){
		$('.carousel').carousel('pause');
	  });
	</script>

CSS

body {
      	padding - top : 60px;
      	padding - bottom : 40px;
      }
.item{
    height:480px;
    width:1200px;
    background-color:orange;
}
.carousel-caption p{
    margin-left:-500px;
    margin-top:-200px;
    
}