JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="menuwrap">
<ul class="majestic">
<li><a href="" id="home"><i class="fa fa-home"></i><strong>Home</strong><small>Show Off All</small></a></li>
<li><a href="index.php" id="forums"><i class="fa fa-file-text"></i><strong>Forums</strong><small>Community</small></a>
<ul>
<li><a href="search.php?action=getnew"><i class="fa fa-link"></i>New Posts</a></li>
<li><a href="search.php?action=getdaily"><i class="fa fa-link"></i>New Topics</a></li>
</ul>
</li>
<li><a href="memberlist.php" id="memberlist"><i class="fa fa-group"></i><strong>Members</strong><small>Memberlist</small></a></li>
<li class="nav-toggler toggle-slide-top"><a href="#"><i class="fa fa fa-search"></i><strong>Search</strong><small>Search Forum</small></a></li>
<li><a href="misc.php?action=help" id="help"><i class="fa fa-exclamation"></i> <strong>Help</strong><small>Help Documents</small></a></li>
<li><a href="calendar.php" id="calendar"><i class="fa fa fa-calendar"></i><strong>Calendar</strong><small>Dates and Time</small></a></li>
<li><a href=""><i class="fa fa-chevron-down"></i><strong>More</strong><small>More Links</small></a>
<ul>
<li><a href="#"><i class="fa fa-link"></i>Link 1</a></li>
<li><a href="#"><i class="fa fa-link"></i>Link 2</a>
<li><a href="#"><i class="fa fa-link"></i>Link 3</a></li>
<li><a href="#"><i class="fa fa-link"></i>Link 4</a></li>
</ul>
</li>
</ul>
</div>

CSS

.majestic {
  list-style: none;
  font-family:Tahoma, Arial, Verdana, sans-serif;
  padding: 0;
  margin: 0;
  height: 100px;
  line-height: 15px;
  border-left: 1px solid #313131;
  border-right: 1px solid #424242;
    background:#222;
    width:100%;
}

.majestic li {
  float: left;
  position: relative;
    list-style:none;
}

.majestic li a {
  display: block;
  text-decoration: none;
  padding: 20px;
  text-align: center;
  color: #FFF;
border-right: 1px solid #363636;
border-left: 1px solid #424242;
}

.majestic li a i {
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
}

.majestic li a strong {
  display: block;
  text-transform: uppercase;
}

.majestic li a small {
  display: block;
  font-size: 10px;
}

.majestic li a i, .majestic li a strong, .majestic li a small {
  position: relative;  
  transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -webkit-transition: all 300ms linear;
}

.majestic li:hover > a i {
    opacity: 1;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
    -o-animation: moveFromTop 300ms ease-in-out;
    animation: moveFromTop 300ms ease-in-out;
}

.majestic li:hover a strong {
    opacity: 1;
    -webkit-animation: moveFromLeft 300ms ease-in-out;
    -moz-animation: moveFromLeft 300ms ease-in-out;
    -ms-animation: moveFromLeft 300ms ease-in-out;
    -o-animation: moveFromLeft 300ms ease-in-out;
    animation: moveFromLeft 300ms ease-in-out;
}

.majestic li:hover a small {
    opacity: 1;
    -webkit-animation: moveFromRight 300ms ease-in-out;
    -moz-animation: moveFromRight 300ms ease-in-out;
    -ms-animation: moveFromRight 300ms ease-in-out;
    -o-animation: moveFromRight 300ms ease-in-out;
    animation: moveFromRight 300ms ease-in-out;
}

.majestic li:hover > a {
  color: #E74C3C;
  position: relative;
  border-bottom: 0px...