JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<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">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css">
<section id="demos">
  <div class="loop owl-carousel owl-theme">
    <div class="item" data-hash="one">
      <h4>1</h4>
    </div>
    <div class="item" data-hash="two">
      <h4>2</h4>
    </div>
    <div class="item" data-hash="thre">
      <h4>3</h4>
    </div>
    <div class="item" data-hash="four">
      <h4>4</h4>
    </div>
    <div class="item" data-hash="five">
      <h4>5</h4>
    </div>
    <div class="item" data-hash="six">
      <h4>6</h4>
    </div>
    <div class="item" data-hash="seven">
      <h4>7</h4>
    </div>
  </div>
</section>

<div class='content'>
  <div class="c" id="one">
    <h4>1</h4>
  </div>
  <div class="c" id="two">
    <h4>2</h4>
  </div>
  <div class="c" id="thre">
    <h4>3</h4>
  </div>
  <div class="c" id="four">
    <h4>4</h4>
  </div>
  <div class="c" id="five">
    <h4>5</h4>
  </div>
  <div class="c" id="six">
    <h4>6</h4>
  </div>
  <div class="c" id="seven">
    <h4>7</h4>
  </div>
</div>

CSS

.c {
  display: none;
}

.c_active {
  display: block;
}

JavaScript

$('.loop').owlCarousel({
  center: true,
  items: 1,
  nav: true,
  dots: false,
  loop: true,
  margin: 10,
	onInitialized: contentShow,
  onTranslated: contentShow
});

function contentShow(event){
  var active_c = $('.content').find('.c_active');
  var active = $('.owl-item.center').find('.item');
  var hash = active.data('hash');
  
	active_c.removeClass('c_active');
  
  $("#" + hash).addClass('c_active');
}