JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav>
  <ul>
    <div class='li-container'>
      <li>
        patientwisdom
      </li>
      <li>
        logo
      </li>
      <li>
        some link
      </li>
      <div class='indicator'>
        
      </div>
    </div>
  </ul>
</nav>

SCSS

html, body, ul {
  margin: 0;
}
ul {
  list-style: none;
}
nav {
  height:  35px;
  background: white;
  
  ul {
    height: 100%;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
  }
  
  li {
    float: left;
    height: 100%;
    margin: 0 10px;
    transition: all 0.15s ease;
    
    .selected {
      transition: all 0.15s ease;
    }
  }
  
  .li-container {
    display: inline-block;
    height: 100%;
    position: relative;
  }
  
  .indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: teal;
  }
}

JavaScript

$(function() {
	$('.indicator').first().animate({
  	width: $('li').first().width() + 20,
  }, 200);
  
	$('li').on('click', function() {
  	var indicator = $('.indicator');
    var liLeft = $(this).position().left;
    var liWidth = $(this).outerWidth();
    console.log(liLeft);
    $(indicator).animate({
    	'left': liLeft,
      'width': liWidth + 20,
    }, 100);
  });
});