JSFiddle - React, Tailwind, and code Playground

by Binary Galzor

HTML

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-one owl-carousel owl-theme">
    <div class="item" style="width:250px; height: 200px; background-color: green"></div>
    <div class="item" style="width:250px; height: 200px; background-color: green"></div>
    <div class="item" style="width:250px; height: 200px; background-color: green"></div>
</div>

<div class="owl-two owl-carousel owl-theme">
    <div class="item" style="width:250px; height: 200px; background-color: blue"></div>
    <div class="item" style="width:250px; height: 200px; background-color: blue"></div>
    <div class="item" style="width:250px; height: 200px; background-color: blue"></div>
</div>

<div class="owl-three owl-carousel owl-theme">
    <div class="item" style="width:250px; height: 200px; background-color: red"></div>
    <div class="item" style="width:250px; height: 200px; background-color: red"></div>
    <div class="item" style="width:250px; height: 200px; background-color: red"></div>
</div>

JavaScript

$(document).ready(function(){
$('.owl-carousel').each(function(){
	$(this).owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2
            },
            1000:{
                items:3
            }
        }
    });

});
    
    
});