JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://timekill.in/extenso/css/owl.carousel.css">
<link rel="stylesheet" href="http://timekill.in/extenso/css/owl.theme.css">
<script src="http://timekill.in/extenso/js/owl.carousel.js"></script>
<link rel="stylesheet" href=" //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div class="container">   
    <div id="slider-1">
      <div class="item"><img src="http://via.placeholder.com/350x150" alt="Owl Image"></div>
      <div class="item"><img src="http://via.placeholder.com/350x150" alt="Owl Image"></div>
      <div class="item"><img src="http://via.placeholder.com/350x150/" alt="Owl Image"></div>
      <div class="item"><img src="http://www.n-school.com/" alt="Owl Image"></div>

    </div>
    <div class="customNavigation">
        <a class="btn prev">
            <i class="fa fa-chevron-left"></i>
        </a>
        <a class="btn next">
            <i class="fa fa-chevron-right"></i>
        </a>
   </div><!-- /.customNavigation -->
</div><!-- /.contianer -->
          <br><br><br><br>
<!-- SLIDER 2 START -->
<div class="container">   
    <div id="slider-2">
      <div class="item"><img src="http://via.placeholder.com/350x150" alt="Owl Image"></div>
      <div class="item"><img src="http://via.placeholder.com/350x150" alt="Owl Image"></div>
      <div class="item"><img src="http://via.placeholder.com/350x150" alt="Owl Image"></div>
      <div class="item"><img src="http://via.placeholder.com/350x150" alt="Owl Image"></div>
      <div class="item"><img src="http://via.placeholder.com/350x150" alt="Owl Image"></div>
    </div>
    <div class="customNavigation">
        <a class="btn prev">
            <i class="fa fa-chevron-left"></i>
        </a>
        <a class="btn next">
            <i class="fa fa-chevron-right"></i>
        </a>
   </div><!-- /.customNavigation -->
</div><!-- /.contianer -->

CSS

#slider-1 .item,
#slider-2 .item{
  margin: 3px;
}
#slider-1 .item img,
#slider-2 .item img{
  display: block;
  width: 100%;
  height: 80px;
}
.container{
    text-align: center;
}
    .customNavigation a.btn:hover{
        cursor: pointer;
    }

JavaScript

$(document).ready(function() {    
    var slider1 = $("#slider-1");

    slider1.owlCarousel({		 
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        items : 5,
        pagination: false,
        stopOnHover: true,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });
    // Custom Navigation Events
    $(".next").click(function(){
        slider1.trigger('owl.next');
    })
    $(".prev").click(function(){
        slider1.trigger('owl.prev');
    })
    
     var slider2 = $("#slider-2");

    slider2.owlCarousel({		 
        autoPlay: 3000, //Set AutoPlay to 3 seconds
        items : 5,
        pagination: false,
        stopOnHover: true,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3]
    });
    // Custom Navigation Events
    $(".next").click(function(){
        slider2.trigger('owl.next');
    })
    $(".prev").click(function(){
        slider2.trigger('owl.prev');
    })
 
});