JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://yakabod.yakabox.com/custom/js/cache/a5956e444144452934c4b44c48e02eba.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/ed3fc238eb15d0e2c462e753ab0218cb.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="ui-widget ui-state-default ui-background-flat menuGlobalHorizontal">
    <ul class="ui-yakawidget-list ui-helper-clearfix ui-menu">
        <li class="ui-menu-item brand">
             <h3>Notifications</h3>

        </li>
        <li class="ui-menu-item"><a href="#" title="Click to View Upcoming Events" class="inactive"><i class="fa fa-calendar "></i><span class="ui-yakabox-global-nav-label">Itinerary</span> </a> 
        </li>
        <li class="ui-menu-item"><a href="#" class="active" title="You have 26 unread messages."> <i class="fa fa-paper-plane-o "></i> <span class="label label-danger label-as-badge">26</span> <span class="ui-yakabox-global-nav-label">Messages</span></a> 
        </li>
        <li class="ui-menu-item" title="Recipe Books"> <a href="#" class="inactive"><i class="fa fa-birthday-cake"></i> <span class="ui-yakabox-global-nav-label">Recipe Books</span></a> 
        </li>
        <li class="ui-menu-item" title="Recipe Box" aria-haspopup="true"> <i class="fa fa-cube active"></i>  <a href="#" data-toggle="dropdown"> <span class="label label-danger label-as-badge">3</span></a>

            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li class="ui-menu-item"><a href="#" title="Open in Reports Tab"><i class="fa fa-external-link pull-right"  ></i><strong>Recipe Box</strong></a>
                </li>
                
                <li role="presentation" class="divider"></li>
                  <li...

CSS

.menuGlobalHorizontal {
    position:absolute;
    width:auto;
    border-radius: 0 0 5px 5px;
    right:25%;
}
.menuGlobalHorizontal .ui-yakabox-global-nav-label {
    display:none;
}
.menuGlobalHorizontal .ui-menu-item {
    display:inline-block;
    float:left;
    min-width:40px;
}
.menuGlobalHorizontal .ui-menu-item a.inactive {
    display:block;
    text-align:center;
}
.menuGlobalHorizontal .ui-menu-item .fa {
    font-size:16px
}
.menuGlobalHorizontal .ui-menu-item .inactive .fa {
    color:#777;
}
.menuGlobalHorizontal .ui-menu-item .active .fa {
    color:#ffffff;
}
.menuGlobalHorizontal .label-as-badge {
    position: absolute;
    right:1px;
    bottom:-4px;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    padding: 3px 6px;
    box-shadow:2px 2px 2px rgba(0, 0, 0, 0.4);
}
.menuGlobalHorizontal.ui-state-default {
    background: #4c4c4c;
    /* Old browsers */
    background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 55%, #131313 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c4c4c), color-stop(55%, #2c2c2c), color-stop(100%, #131313));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4c4c4c 0%, #2c2c2c 55%, #131313 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4c4c4c 0%, #2c2c2c 55%, #131313 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4c4c4c 0%, #2c2c2c 55%, #131313 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 55%, #131313 100%) !important;
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0);
    /* IE6-9 */
    color:white;
    border:none;
    padding:0px 0
}
.menuGlobalHorizontal .ui-menu-item:hover {
    background: #000000;
    /* Old browsers */
    color:white;
    border:none;
    padding:0px 0
}
.menuGlobalHorizontal h3 {
    color:#ECECEC;
   ...