JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<div id="demo">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="owl-demo" class="owl-carousel">
                    <div class="item">
                        <h1>1</h1>
                    </div>
                    <div class="item">
                        <h1>2</h1>
                    </div>
                    <div class="item">
                        <h1>3</h1>
                    </div>
                    <div class="item">
                        <h1>4</h1>
                    </div>
                    <div class="item">
                        <h1>5</h1>
                    </div>
                    <div class="item">
                        <h1>6</h1>
                    </div>
                    <div class="item">
                        <h1>7</h1>
                    </div>
                    <div class="item">
                        <h1>8</h1>
                    </div>
                    <div class="item">
                        <h1>9</h1>
                    </div>
                    <div class="item">
                        <h1>10</h1>
                    </div>
                </div>
                <div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
            </div>
        </div>
    </div>
</div>
<div id="demo-1">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="owl-demo-1" class="owl-carousel">
                    <div class="item">
                        <h1>1</h1>
                    </div>
                    <div class="item">
                        <h1>2</h1>
  ...

CSS

#owl-demo .item, #owl-demo-1 .item{
        background: #3fbf79;
        padding: 30px 0px;
        margin: 10px;
        color: #FFF;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        text-align: center;
        width: 190px;
    }
    .customNavigation{
      text-align: center;
    }
    .customNavigation a{
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

JavaScript

$(document).ready(function() {

      $("#owl-demo, #owl-demo-1").each(function() {
      	$(this).owlCarousel({
          items : 6, //10 items above 1000px browser width
          itemsDesktop : [1000,6], //5 items between 1000px and 901px
          itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0;
          itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
        });
      });
      // Custom Navigation Events
      $(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
      $(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
    });