JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<div class="wrap">
    <div id="myCarousel1" class="carousel slide">
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item">
            <img src="http://placehold.it/350x150" />
        </div>
        <div class="item">
            <img src="http://placehold.it/350x150" />
        </div>
        <div class="item">
            <img src="http://placehold.it/350x150" />
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href=".carousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href=".carousel" data-slide="next">&rsaquo;</a>
    </div>
    
    <div id="myCarousel2" class="carousel slide">
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item">
            <img src="http://placehold.it/350x150" />
        </div>
        <div class="item">
            <img src="http://placehold.it/350x150" />
        </div>
        <div class="item">
            <img src="http://placehold.it/350x150" />
        </div>
      </div>
    </div>
    
    <div id="myCarousel3" class="carousel slide">
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item">
            <img src="http://placehold.it/350x150" />
        </div>
        <div class="item">
            <img src="http://placehold.it/350x150" />
        </div>
        <div class="item">
            <img src="http://placehold.it/350x150" />
        </div>
      </div>
    </div>
</div>

CSS

.wrap{
    width: 350px;
    margin: 0 auto;
}

JavaScript

$('.carousel').carousel({
    interval: false 
});