JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
  <nav class="header-nav">
    <ul class="nav">
      <li class="nav__item active">
        <a href="" target="_blank" class="link">
          link
        </a>
      </li>
      <li class="nav__item">
        <a href="" target="_blank" class="link">
          link
        </a>
        <div class="submenu">
        
        </div>
      </li>
      <li class="nav__item">
        <a href="" target="_blank" class="link">
          link
        </a>
      </li>
      <li class="nav__item">
        <a href="" target="_blank" class="link">
          link
        </a>
      </li>
      <div id="border"></div>
    </ul>
  </nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.easing.min.js"></script>

CSS

nav.header-nav {
  display: flex;
  justify-content: space-between;
}

ul.nav {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

li.nav__item {
  position: relative;
  width: calc(100% / 4);
}

#border {
  height: 4px;
  background: #faae31;
  position: absolute;
}

.submenu {
    width: 100%;
    background: #a0a0a0;
    height: 100%;
    position: absolute;
    top: calc(100% + 20px);
}

JavaScript

$(document).ready(function() {
  var style = 'easeOutExpo';
  var default_left = Math.round($('.header-nav .nav li.active').offset().left - $('.header-nav .nav').offset().left);
  var default_top = $('.navigation ').outerHeight() + 10; /* 10 - отступ от пункта меню */
  var default_width = $('.header-nav .nav li.active').outerWidth();
  var default_height__container = $('.header').outerHeight();
  $('#border').css({
    left: default_left,
    top: default_top,
    width: default_width
  });
  $('.header-nav > .nav > li').hover(function() {
    left = Math.round($(this).offset().left - $('.header-nav > .nav').offset().left);
    width = $(this).outerWidth();
    $('#border').stop(false, true).animate({
      left: left,
      width: width
    }, {
      duration: 500,
      easing: style
    });
  }).click(function() {
    $('.header-nav > .nav > li').removeClass('active');
    $(this).addClass('active');
  });
  $('.header-nav > .nav').mouseleave(function() {
    default_left = Math.round($('.header-nav > .nav > li.active').offset().left - $('.header-nav > .nav').offset().left);
    default_width = $('.header-nav > .nav > li.active').outerWidth();
    $('#border').stop(false, true).animate({
      left: default_left,
      width: default_width
    }, {
      duration: 1500,
      easing: style
    });
  });
});