JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<main>
  <div class="container">
    <div class="block-wrap">
      <div id="js-carousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
            <div class="caption">

              <div class="mystring hide">companies with Inbound Marketing</div>
              <h4>We help <div class="demo-txt"></div> </h4>
            </div>
          </div>

          <div class="item">
            <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
            <div class="caption">
              <div class="mystring hide">companies with Inbound Marketing</div>

              <h4>We help  <div class="demo-txt "></div> </h4>
            </div>
          </div>

          <div class="item">
            <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
            <div class="caption">
              <div class="mystring hide">2companies with Inbound Marketing</div>

              <h4>We help <div class="demo-txt"></div> </h4>
            </div>
          </div>

          <div class="item">
            <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
            <div class="caption">
     ...

CSS

.carousel-inner {
  position: relative;
}

.carousel-inner .overlay-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.carousel-inner .caption {
  color: #ffffff;
  font-weight: bold;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 100px;
  z-index: 9999;
  left: 5%;
}

.carousel-inner .caption h1,
.carousel-inner .caption h2 {
  font-weight: bold;
  line-height: 1.6;
}

.carousel-inner .caption h1 {
  font-size: 64px;
}

.carousel-inner .caption h2 {
  font-size: 44px;
}

.carousel-inner .demo-txt {
  border-bottom: 4px solid #ec8422;
  padding-bottom: 5px;
}

.carousel-inner .demo-txt {
  /* width: 0%;
  white-space: nowrap;
  overflow: hidden;
    -webkit-transition: width 2.3s ease-in-out;
    -moz-transition: width 2.3s ease-in-out;
    -o-transition: width 2.3s ease-in-out;
    transition: width 2.3s ease-in-out;
*/
  /*display: none;*/
}

.carousel-inner .active .demo-txt {
  /*width: 100%;*/
}

JavaScript

$(document).ready(function() {
  $('#js-carousel').carousel({
    interval: 5000
  });

  var showText = function(target, message, index, interval) {
    if (index < message.length) {      
      	$(target).append(message[index++]);
        timer = setTimeout(function() {
           showText(target, message, index, interval);
        }, interval);
    }
  }, timer;
  
  showText(".active .demo-txt", $('#js-carousel').find(".active .mystring").html(), 0, 100);
  
  $('#js-carousel').on('slid.bs.carousel', function() {
    clearTimeout(timer);
    $('.prevActive').removeClass('prevActive').html('');
    var str = $(this).find(".active .mystring").html();
    $('.active .demo-txt').addClass('prevActive').html("");
		showText(".active .demo-txt", str, 0, 100);
  });
});