JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div style="width:320px">
  <div class="menu-name owl-carousel owl-theme">
  <div class="item">
    <div class="name quicksand aktip" id="one">Profile</div>
  </div>
  <div class="item">
    <div class="name quicksand" id="two">About</div>
  </div>
  <div class="item">
    <div class="name quicksand" id="three">Gallery</div>
  </div>
  <div class="item">
    <div class="name quicksand" id="four">Contact</div>
  </div>
  <div class="item">
    <div class="name quicksand" id="five">Details</div>
  </div>
  </div>
</div>

CSS

.menu-name {
  background: tomato;
  color: white;
border-bottom: 2px solid #eaeaea;
	overflow-x: auto;
	white-space: nowrap;
}

.name {
  border: 1px solid white;
  padding: 10px;
  cursor: pointer;
	margin: 8px;
  transition: margin 0.4s ease;
}

.aktip {
  background: orange;
}

JavaScript

var $owl = $('.owl-carousel');
				$owl.owlCarousel({
					center: false,
          margin: 0,
          autoWidth:true,
				});

				$('.owl-carousel').on('click', '.owl-item.active', function(e) {
				  var carousel = $('.owl-carousel').data('owl.carousel');
				  e.preventDefault();
				  carousel.to(carousel.relative($(this).index()), false, true);
				});
        
        
//add class aktip
$(".name").click(function(e){
  var id = $(this).attr("id");
  var toShow = '#show-' + id;

  $(".name").removeClass("aktip");
  $(this).addClass("aktip")

  $(".isi-content").not(toShow).hide();
  $(toShow).fadeIn();
});