JSFiddle - React, Tailwind, and code Playground

by Adil Heybətov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel">
    <div class="item">
        <h4>1</h4>
    </div>
    <div class="item">
        <h4>2</h4>
    </div>
    <div class="item">
        <h4>3</h4>
    </div>
    <div class="item">
        <h4>4</h4>
    </div>
    <div class="item">
        <h4>5</h4>
    </div>
    <div class="item">
        <h4>6</h4>
    </div>
    <div class="item">
        <h4>7</h4>
    </div>
    <div class="item">
        <h4>8</h4>
    </div>
    <div class="item">
        <h4>9</h4>
    </div>
    <div class="item">
        <h4>10</h4>
    </div>
    <div class="item">
        <h4>11</h4>
    </div>
    <div class="item">
        <h4>12</h4>
    </div>
</div>

CSS

.item {
    width: 185px;
}
.owl-carousel{
  width:600px;
}
.owl-carousel .item {
    height: 60rem;
    background: #4DC7A0;
    padding: 0;
    border-right:1px solid black;
}

JavaScript

$('.owl-carousel').owlCarousel({
    loop: false,
    margin: 0,
    autoWidth: true,
                  mergeFit:true,
    responsive: {
        280: {
            item: 1
        },
        466: {
            items: 3
        },
        768: {
            items: 3
        },
        992: {
            items: 2,
            margin: 20
        },
        1201: {
            items: 5,
            margin: 20
        }
    }
})