JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<nav>
  <a href="#"><span>link 01</span></a>
  <a class="active" href="#"><span>link 02</span></a>
  <a href="#"><span>link 03</span></a>
  <a href="#"><span>link 04</span></a>
</nav>

SCSS

body {
  padding: 10%;
}

a {
  color: #fff;
}

nav {
  display: table;
  width: 100%;
  
  background: #222;
  
  a {
    display: table-cell;
    line-height: 40px;
    padding: 0 20px;
    
    vertical-align: middle;
    text-align: center;

    span {
      display: inline-block;
      line-height: inherit;
    }
    
    &.active {
      background: #444;
      
      span {
        border-bottom: 3px solid #fff;
      }
    }
  }
}