JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav class='std-nav'>
  <ul class='content'>
    <li class='left'>
      <a>
        <div class='icon-info-box'>
          <div class='icon-box'>
            <img src='http://i.imgur.com/sZs6t7k.png'/>
          </div>
          <label>
            Link
          </label>
        </div><div class='v-m-hack'></div>
      </a>
    </li>
    <li class='left'>
      <a>
        <div class='icon-info-box'>
          <div class='icon-box'>
            <img src='http://i.imgur.com/sZs6t7k.png'/>
          </div>
          <label>
            Link
          </label>
        </div><div class='v-m-hack'></div>
      </a>
    </li>
    <li class='right'>
      <a>
        <div class='icon-info-box'>
          <div class='icon-box'>
            <img src='http://i.imgur.com/sZs6t7k.png'/>
          </div>
          <label>
            Link
          </label>
        </div><div class='v-m-hack'></div>
      </a>
    </li>
  </ul>
</nav>

SCSS

html, body, ul {
  margin: 0;
  font-family: sans-serif;
  font-size: 14px;
}

ul {
  list-style: none;
  padding: 0;
}

.content {
  width: 90%;
  max-width: 500px;
  height: 100%;
  margin: 0 auto;
}

.v-m-hack {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

nav {
  height: 40px;
  background: white;
  
  li {
    height: 100%;
    
    &.left {
      float: left;
    }
    
    &.right {
      float: right;
    }
  }
  
  a {
    display: block;
    height: 100%;
    padding: 0 15px;
    
    &:hover {
      background: #eee;
    }
  }
}

.flex-nav {
  
}


.icon-info-box {
  display: inline-block;
  vertical-align: middle;
  
  > * {
    display: inline-block;
    vertical-align: middle;
  }
  
  .icon-box {
    width: 20px;
    height: 20px;
    margin-right: 3px;
    
    img {
      display: block;
      width: 100%;
    }
  }
}