JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<script src="https://use.fontawesome.com/3b74e9a538.js"></script>
<nav class="menu">
  <a href="#" class="menu-link">
    <i class="fa fa-home"></i>
    <span class="menu-label">Home</span>
  </a>
  <a href="#" class="menu-link active">
    <i class="fa fa-camera"></i>
    <span class="menu-label">Gallery</span>
  </a>
  <a href="#" class="menu-link">
    <i class="fa fa-users"></i>
    <span class="menu-label">Members</span>
  </a>
  <a href="#" class="menu-link">
    <i class="fa fa-cog"></i>
    <span class="menu-label">Settings</span>
  </a>
</nav>

SCSS

body {
  font-family: "-apple-system", BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.menu {
  display: table;
  width: 100%;
  border: 1px solid #ccc;

  &-link {
    display: table-cell;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 0 #FFFFFF;
    transition: all 200ms ease;
    border: 1px solid transparent;
    border-width: 0 1px;
    background: rgb(255, 255, 255);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%);
    color: #666;
    
    &:hover {
      background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(218, 218, 218, 1) 100%);
    }
    
    &.active {
      position: relative;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(218, 218, 218, 1) 100%);
      border-color: #ccc;
      
      &:after {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        content: '';
        background: orange;
      }
    }
  }

  &-label {
    font-size: 14px;
    display: block;
    margin-top: 5px;
  }
}