JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://rawgit.com/OwlCarousel2/OwlCarousel2/develop/dist/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/OwlCarousel2/OwlCarousel2/develop/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://rawgit.com/OwlCarousel2/OwlCarousel2/develop/dist/assets/owl.theme.default.min.css">
<!-- Follow these instructions, please! -->

<h1>Owl Carousel 2 bug report?</h1>

<p>Have a bug report to share with us? No problem! <strong>Fork this template</strong> to reproduce an isolated test case so we can more easily identify the problem and hopefully find a fix. Be sure to read the <a href="https://github.com/smashingboxes/OwlCarousel2/blob/develop/CONTRIBUTING.md#bug-reports">bug report guidelines</a> for maximum effectiveness.</p>
<p>Once you're set, replace the contents of this page and share the link with us in a <a href="https://github.com/OwlFonk/OwlCarousel2/issues/new">new issue</a>.</p>
<p>Thanks!</p>
<div class="owl-carousel owl-theme">
  <div class="item">
    <img src="http://placehold.it/350x150&text=1" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=2" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=3" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=4" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=5" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=6" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=7" />
  </div>
  <div class="item">
    <img src="http://placehold.it/350x150&text=8" />
  </div>
</div>

JavaScript

$('.owl-carousel').owlCarousel({
  autoWidth: true,
  center: true,
  items: 3,
  loop: true,
  margin: 10
});