JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="owl-carousel">
    <div class="item">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="item">
        <img src="http://placehold.it/350x150">
    </div>
    <div class="item">
        <img src="http://placehold.it/350x150">
    </div>
</div>

JavaScript

$('.owl-carousel').owlCarousel({    
    loop: true,
    margin: 10,
    nav: true,
    dots: true,
    animateOut: 'slideOutDown',
    animateIn: 'slideInDown',
    responsive:{
			0:{
				items:1
			},
			600:{
				items:1
			},
			1000:{
				items:1
			}
		}
});