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="showoff-menu">
<li><a href="{$mybb->settings['bburl']}"><i class="fa fa-home"></i><strong>Home</strong><small>Show Off All</small></a></li>
<li><a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-file-text"></i><strong>Forums</strong><small>Community</small></a>
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><i class="fa fa-link"></i>{$lang->welcome_newposts}</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily"><i class="fa fa-link"></i>{$lang->welcome_todaysposts}</a></li>
</ul>
</li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-group"></i><strong>Members</strong><small>Memberlist</small></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa fa-search"></i><strong>Search</strong><small>Search Forum</small></a></li>
<li><a href="{$mybb->settings['bburl']}/help.php"><i class="fa fa-exclamation"></i><strong>Help</strong><small>Help Documents</small></a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><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

.menuwrap {
width: 100%;
border-left: 1px solid #424242;
margin-right: -20px;
    background:#333;
}

.showoff-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100px;
  line-height: 15px;
  border-left: 1px solid #313131;
  border-right: 1px solid #424242;
}

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

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

.showoff-menu li a i {
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
}

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

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

.showoff-menu li a i, .showoff-menu li a strong, .showoff-menu 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;
}

.showoff-menu 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;
}

.showoff-menu 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;
}

.showoff-menu 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;
}

.showoff-menu...