JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav class='nav-std'>
  <div class='nav-item'>
    <i class='nav-indicator'></i>
    pricing
  </div>
  <div class='nav-item'>
    <i class='nav-indicator'></i>
    features
  </div>
  <div class='nav-item'>
    <i class='nav-indicator'></i>
    integrations
  </div>
</nav>

CSS

html, body {
  margin: 0;
  font-family: helvetica;
  font-size: 14px;
}

.nav-std {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 15px;
  
}

.nav-item {
  display: inline-block;
  padding: 10px;
  position: relative;
  margin: 0 5px;
}

.nav-item:hover {
  cursor: pointer;
}

.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: blue;
  transition: width 0.15s;
  
}

.nav-item:hover .nav-indicator {
  width: 100%;
  transition: width 0.15s;
}