JSFiddle - React, Tailwind, and code Playground

by Michael LaCroix

HTML

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,600' rel='stylesheet' type='text/css'>

<ul class='wrap horizontal'>
    <li><a>Ichi Nav Link</a></li>
    <li><a class='active'>Ni Nav Link</a></li>
    <li><a>San Nav Link</a></li>
    <li><a>Yon Nav Link</a></li>
</ul>

<ul class='wrap vertical'>
    <li><a>Ichi Example Link</a></li>
    <li><a class='active'>Ni Example Link</a></li>
    <li><a>San Example Link</a></li>
    <li><a>Yon Example Link</a></li>
    <li><a>Go Example Link</a></li>
</ul>

SCSS

$border-size: 0.25em;

* {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body {
    background: #fffffe;
    font: 300 100% 'Ubuntu', sans-serif;
}

ul {
    float: left;
    clear: left;
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    font-size: 0.875em;
}

ul:after {
    content:"";
    display:table;
    clear:both;
}

.horizontal li {
    float: left;
}

.horizontal a {
    display: inline-block;
    border-bottom-width: $border-size;
    border-bottom-style: solid;
}

.vertical a {
    display: block;
    border-left-width: $border-size;
    border-left-style: solid;
}

li a {
    padding: 0.75em 1em;
    border-color: #e8e8e1;
    background: #f8f8f1;
    color: #66663c;
}

li a:hover {
    background: #f3f3eb;
    color: #55553c;
    border-color: #d3d3cb;
}

li a.active {
    border-color: #66663c;
    background: darken(#f3f3eb, 3);
    color: #22223c;
}