JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<div class="pull-right">
    <ul class="nav-menu snip1189">
      <li><a href="#">Home</a></li>
      <li><a href="#" class="active">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
 </div>

CSS

.nav-menu {
    list-style: none;
    margin-top: 18px;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}
.nav-menu li {
    float: left;
    border-left: 1px solid #1e3866;
    padding: 5px 10px;
}
.snip1189 li {
    display: inline-block;
    list-style: outside none none;
    padding: 0;
}
.snip1189 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}
.nav-menu li a {
    color: #1e3866;
    font-size: 13px;
}
.snip1189 a {
    padding: 0.2em 0.5em;
    margin: 0.2em 0;
    display: block;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    text-decoration: none;
}
.snip1189 a:before, .snip1189 a:after {
    height: 14px;
    width: 14px;
    position: absolute;
    content: '';
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
    opacity: 0;
}

.snip1189 a:before {
    left: 0;
    top: 0;
    border-left: 2px solid #e52b25;
    border-top: 2px solid #e52b25;
    -webkit-transform: translate(100%, 50%);
    transform: translate(100%, 50%);
}

.snip1189 a:after {
    right: 0;
    bottom: 0;
    border-right: 2px solid #1d3768;
    border-bottom: 2px solid #1d3768;
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%);
}

.snip1189 a:hover, .snip1189 .current a {
    color: #4a4949;
    font-weight: bold;
}

.snip1189 a.active:before,
.snip1189 a.active:after,
.snip1189 a:hover:before,
.snip1189 .current a:before,
.snip1189 a:hover:after,
.snip1189 .current a:after {
    -webkit-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
    opacity: 1;
}