JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css">
<div id="demos">
	<div class="loop 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>
</div>

CSS

.owl-carousel .owl-item.big div {background:#ac0000 !important;}
.owl-carousel .owl-item.medium div {background:#dd0000 !important;}

JavaScript

$(function(){
    $('.loop').owlCarousel({
        center: true,
        items:5,
        loop:true,
        margin:10
    });
    
    $('.loop').on('translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
    });
});