JSFiddle - React, Tailwind, and code Playground

HTML

<script src="bootstrap.min.css "></script>
<!-- Nav tabs -->
<ul class="tablist" role="tablist">
    <div class="pill left0"></div>
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">1</div>
  <div class="tab-pane" id="profile">2</div>
</div>

SCSS

.tablist {
  padding: 0;
  height: 80px;
  position: relative;
  margin: 0 0 40px 0;
  border-radius: 20px;
  list-style-type: none;
  background-color: #ccc;
  box-shadow: inset 0 0 0 5px #b3b3b3;

  li {
    width: 50%;
    float: left;

    a {
      color: #000;
      z-index: 1;
      display: block;
      font-size: 18px;
      line-height: 80px;
      text-align: center;
      position: relative;
    }
  }

  .pill {
    z-index: 0;
    width: 50%;
    height: 80px;
    border-radius: 20px;
    position: absolute;
    background-color: #f08c0a;
    -webkit-transition: left 300ms ease-in-out;
    -moz-transition: left 300ms ease-in-out;
    transition: left 300ms ease-in-out;

    &.left0 {
        left:0;
    }
        
    &.left50 {
        left:50%;
    }
  }
}

JavaScript

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    console.log('current:', e.target) // newly activated tab
    console.log('previous:', e.relatedTarget) // previous active tab
    
    if ($('.pill').hasClass('left0')) {
          $('.pill').addClass('left50').removeClass('left0');
        } else {
          $('.pill').addClass('left0').removeClass('left50');
        }
})