JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation">
    <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a>
  </li>
  <li role="presentation">
    <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false">List 2</a>
  </li>
  <li role="presentation">
    <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false">List 3</a>
  </li>
  <li role="presentation">
    <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false">List 4</a>
  </li>
</ul>

<div class="tab-content">
  <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
  <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
  <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
  <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

CSS

.nav-tabs {
  position: relative;
  justify-content: center;
  padding-bottom: 10px;
}

.nav-tabs > li {
  position: relative;
  z-index: 10;
}

.nav-tabs > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
  font-size: 18px;
  color: #000;
  border: none;
  text-decoration: none;
  border-radius: 10px;
  transition: color 0.5s ease;
}

.nav-tabs > li > a.active {
  color: #FFF;
}

.nav-tabs > .active-highlight {
  display: block;
  position: absolute;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}

JavaScript

// on ready
$(document).ready(function() {

  // get active 
  function active_tab_highlight_pos(init = false, resize = false) {

    // our nav tabs
    let nav_tabs = $('.nav-tabs');

    // find our current active tab element
    let active_tab = $(nav_tabs).find('.active');

    // get set nav tabs positions
    let nav_tabs_pos = {
      x: $(nav_tabs).offset().left,
      y: $(nav_tabs).offset().top
    }

    // get set current active tab positions and dimensions
    let active_tab_pos = {
      x: $(active_tab).offset().left - nav_tabs_pos.x,
      y: $(active_tab).offset().top - nav_tabs_pos.y,
      w: $(active_tab).outerWidth(),
      h: $(active_tab).outerHeight()
    }

    // if we are initiating active highlight for the first time
    if (init) {

      // prepend active highlight list element to our nav tabs
      $(nav_tabs).prepend('<li class="active-highlight"></li>');

    }
    
    // get our active hightlight element
    let active_highlight = $(nav_tabs).find('.active-highlight');
    
    // if we are resizing window
    if (resize) {
    
      // disable transition effect
    	$(active_highlight).css({
      	'transition': 'none'
      });
      
      
    // else enable transition effect
    } else {
    
      // change here to change the transition effect and speed
    	$(active_highlight).css({
      	'transition': 'all .5s ease'
      });
    
    }

    // set active highlight position css
    $(active_highlight).css({
      'width': active_tab_pos.w + 'px',
      'height': active_tab_pos.h + 'px',
      'left': active_tab_pos.x + 'px',
      'top': active_tab_pos.y + 'px'
    });

  }

  // reposition active tab highlight on init
  active_tab_highlight_pos(true);
  
  // on window responsive resize event
  $(window).on('resize', function() {
  
    // reposition active tab highlight on responsive resize
    active_tab_highlight_pos(false, true);
    
  });

  // data-bs-toggle="tab" on shown event handler
 ...