JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="carousel slide carousel-fade" id="myCarousel">
            <div class="carousel-inner">
              <div class="item">
                <img alt="" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg">
                <div class="carousel-caption">
                  <h4>First Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div class="item active">
                <img alt="" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg">
                <div class="carousel-caption">
                  <h4>Second Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
              <div class="item">
                <img alt="" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg">
                <div class="carousel-caption">
                  <h4>Third Thumbnail label</h4>
                  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
              </div>
            </div>
            <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
          </div>

SCSS

.carousel.carousel-fade .item {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.carousel.carousel-fade .carousel-caption {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
  left: 0;
  z-index: 2;
  opacity: 0;
  filter: alpha(opacity=0);
    .carousel-caption {
      margin-left: 300px;
      opacity: 0;
    }
}
#myCarousel.carousel-fade .next,
#myCarousel.carousel-fade .prev {
  left: 0;
  z-index: 1;
    .carousel-caption {
      opacity: 0;
      bottom: 150px;
    }
}

.carousel.carousel-fade .carousel-control {
  z-index: 3;
}
#myCarousel {
    .carousel-caption {
      position: absolute;
      bottom:0;
      left:0;        
    }        
}

CoffeeScript

$('.carousel').carousel()