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...

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() {    


          var showText = function (target, message, index, interval) { 
        if (index < message.length) { 
          $(target).append(message[index++]); 
          setTimeout(function () { showText(target, message, index, interval); }, interval); 
        } 
      }    ;

     $('#js-carousel').carousel({
        interval: 5000
    });
    
       var str0 = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str0, 0, 100);    

     $('#js-carousel').on('slid.bs.carousel', function () {
             
       var str = $(this).find(".active .mystring").html();
          $('.active .demo-txt').html("");         
          showText(".active .demo-txt", str, 0, 100);          
     });
    });