JSFiddle - React, Tailwind, and code Playground

HTML

<div class="owl-carousel owl-theme ">
            <img...

CSS

/* prev next button */
.owl-nav{
  position: absolute;
    top: -85px;
    right: 4%;
}
.owl-nav>button{
    width: 48px;
    height: 48px;
    border-radius: 50px !important;
    border:none;
    transition: 200ms;
}
.owl-nav>button:hover{
  opacity: 0.7 !important;
}
.owl-prev{
    background: #F6DDCC !important;
}
.owl-prev>span{
  color: #E89F71;
  font-weight: bold !important;
  font-size: 33px;
}
.owl-prev>span:hover{
  opacity: .8;
}
.owl-next{
  background: #E89F71 !important;
}
.owl-next>span{
  font-size: 33px;
  color: white;
}

/* circle buttons */
.owl-dots{
  position: absolute;
  top: -57px;
  left: 48%;
}
.owl-dot.active{  
  border-radius: 50px;
  border: 1px solid #E89F71 !important;
}
.owl-dot.active >span{
  background: #E89F71 !important;
}

JavaScript

$(document).ready(function(){
	$(".owl-carousel").owlCarousel({
		items:1,
		margin:32,
		nav:true,
		autoWidth:true, 
		loop:true,
		stagePadding:100,
		// autoplay:true,
		// autoplayTimeout:3000
	});
  });