JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://yastatic.net/jquery/2.2.0/jquery.min.js"></script>
<script src="https://yastatic.net/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="https://yastatic.net/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-12">


<div id="sync1" class="owl-carousel owl-theme">
  <div class="item"><img src="http://placehold.it/1000x400"></div>
  <div class="item"><img src="http://placehold.it/1000x400"></div>
  <div class="item"><img src="http://placehold.it/1000x400"></div>
  <div class="item"><img src="http://placehold.it/1000x400"></div>
  <div class="item"><img src="http://placehold.it/1000x400"></div>
  <div class="item"><img src="http://placehold.it/1000x400"></div>
  <div class="item"><img src="http://placehold.it/1000x400"></div>


</div>
<ul id="sync2" class="owl-carousel nav nav-pills nav-justified">
  <li class="item"><i class="fa fa-database"></i> Lorem ipsum</li>
  <li class="item"><i class="fa fa-envelope"></i> Lorem ipsum dolor sit amet</li>
   <li class="item"><i class="fa fa-comments"></i> Lorem ipsum dolor sit amet</li>
  <li class="item"><i class="fa fa-external-link"></i> Lorem ipsum dolor sit amet</li>
   <li class="item"><i class="fa fa-desktop"></i> Lorem ipsum dolor sit amet</li>
  <li class="item">Lorem ipsum dolor sit amet</li>
  <li class="item">Lorem ipsum dolor sit amet</li>
 
</ul>



</div>
</div>
</div>

CSS

#sync2 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    color: #FFF;
    text-align: center;
    cursor: pointer;
}

#sync2 .synced .item{
  background: #0c83e7;
  cursor: default;
}

#sync1 .item img{
  display: block;
  width: 100%;
  height: auto;
}
#bar{
  width: 0%;
  max-width: 100%;
  height: 4px;
  background: #0C83E7;
}
#progressBar{
  width: 100%;
  background: #FFF;
}





.owl-theme .owl-controls .owl-buttons div {
		font-size: 32px;
    padding: 15px;
     background-color: transparent
}
 

 
.owl-theme .owl-controls .owl-buttons div {
  position: absolute;
  
}
 
.owl-theme .owl-controls .owl-buttons .owl-prev{
  left: 5px;
  top: 50%; 
}
 
.owl-theme .owl-controls .owl-buttons .owl-next{
  right: 5px;
  top: 50%;
}

JavaScript

(function() {
        var itemsTree = document.querySelectorAll('[class="row"]');
        if (itemsTree) {
            for(var t = 0, lt = itemsTree.length; t < lt; t++) {
                var h = [],
                    el = [],
                    maxH;
 
                for(var mi = 0, lmi = itemsTree[t].childNodes.length; mi < lmi; mi++) {
                    var m = itemsTree[t].childNodes[mi];
                    el.push(m);
                    h.push(m.offsetHeight);
                }
 
                maxH = Math.max.apply(null, h);
 
                if (maxH > 0) {
                    for(var i = 0, l = el.length; i < l; i++) {
                        el[i].style.height = maxH + 'px';
                    }
                }
            }
        }
    })();
    
    
$(document).ready(function() {
 
  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
 
  sync1.owlCarousel({
      afterInit : progressBar,
      afterMove : moved,
      startDragging : pauseOnDragging,   
    singleItem : true,
     //navigation: true,
   pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
       navigation: true,
    navigationText: [
      '<i class="fa fa-chevron-left"></i>',
      '<i class="fa fa-chevron-right"></i>'
      ],
  });
  

  
  
 
  sync2.owlCarousel({
    items : 5,
    itemsDesktop      : [1199,5],
    itemsDesktopSmall     : [979,4],
    itemsTablet       : [768,3],
    itemsMobile       : [479,3],
    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });
  
  
       sync2.on('mouseover',function(){
      isPause = true;
    });
    sync2.on('mouseout',function(){
      isPause = false;
    });
  
  
  
 
  function syncPosition(el){
    var current = this.currentItem;
    $("#sync2")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync2").data("owlCarousel") !==...