JSFiddle - React, Tailwind, and code Playground

by wamosjk

HTML

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <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>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
      
        <div class="item active">
          <iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx">
            
          </iframe>
           
        </div><!-- End Item -->
 
         <div class="item">
         <iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
           
        </div><!-- End Item -->
        
        <div class="item">
          <iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
           
        </div><!-- End Item -->
      </div><!-- End Carousel Inner -->
      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div><!-- End Carousel -->

CSS

.carousel-indicators li {
	border-radius:0;
	width:8px;
	height:8px;
	background:#fff;
}
.carousel-indicators .active {
	width:10px;
	height:10px;
	background:#39b3d7;
	border-color:#39b3d7;
}