JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

HTML

<div id="menu_outer">
    <ul id="menu_inner">
        <li class="active">
            <a href="javascript:;">Item 1</a>
        </li>
        <li>
            <a href="javascript:;">Item 2</a>
        </li>
        <li>
            <a href="javascript:;">Item 3</a>
        </li>
        <li>
            <a href="javascript:;">Item 4</a>
        </li>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400);

a {
    color: #666;
    text-decoration: none;
}

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

#menu_outer {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 300;
  position: relative;
  margin: 17px 0;
  z-index: 20;
  border: 1px solid #c6c4b0;
  border-left: none;
  border-right: none;
  display: inline-block;
}

#menu_inner {
  list-style-type: none;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 0;
  margin: 0;
}

#menu_inner li {
  float: left;
}

#menu_inner li a {
  position: relative;
  display: block;
  padding: 5px 25px;
  overflow: hidden;
  z-index: 10;
  color: #4f4e4a;
  text-align: center;
  text-transform: capitalize;
}

#menu_inner .active a {
  background-color: #c6c4b0;
  color: #fff;
}

#menu_inner a {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  -ms-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

#menu_inner li:not(.active) a:hover {
  background-color: #817f73;
  color: #fff;
}