JSFiddle - React, Tailwind, and code Playground

by hutber

HTML

<div class="browseMenu clearfix">
    <!-- Bof Section 0-->
    <div class="group head0">
        <div class="head">IT Services &amp; Access</div>
        <!-- Bof Level One-->
        <ul class="levelOne">
            <li><a href="#">Basic IT Access <span>&#9658;</span></a>
                <div class="levelTwo">
                    jamie
                </div>
            </li>
            <li><a href="#">Business Unit Systems<span>&#9658;</span></a></li>
            <li><a href="#">Desk Phones, Smartphones &amp; Tablets<span>&#9658;</span></a></li>
            <li><a href="#">Hardware<span>&#9658;</span></a></li>
            <li><a href="#">IT for IT<span>&#9658;</span></a></li>
            <li><a href="#">Printer, archiving &amp; scanning<span>&#9658;</span></a></li>
            <li><a href="#">Reporting and Data Management<span>&#9658;</span></a></li>
            <li><a href="#">Software<span>&#9658;</span></a></li>
            <li><a href="#">Wi-Fi &amp; internet<span>&#9658;</span></a></li>
            <li><a href="#">eMail and Collaboration<span>&#9658;</span></a></li>
        </ul>
        <!-- Bof Level One-->
    </div>
    <!-- Eof Section 0-->
    <!-- Bof Section 1-->
    <div class="group head1">
        <div class="head">IT Services &amp; Access</div>
        <!-- Bof Level One-->
        <ul class="levelOne">
            <li><a href="#">Basic IT Access <span>&#9658;</span></a>
                <div class="levelTwo">
                    jamie
                </div></li>
            <li><a href="#">Business Unit Systems<span>&#9658;</span></a></li>
            <li><a href="#">Desk Phones, Smartphones &amp; Tablets<span>&#9658;</span></a></li>
            <li><a href="#">Hardware<span>&#9658;</span></a></li>
            <li><a href="#">IT for IT<span>&#9658;</span></a></li>
            <li><a href="#">Printer, archiving &amp; scanning<span>&#9658;</span></a></li>
            <li><a href="#">Reporting and Data Management<span>&#9658;</span></a></li>
  ...

CSS

body {
    background: #DDD;
}
/*****************
*     General    *
******************/
.group {
    width: 155px;
    height: 100%;
    float: left;
    margin-right: 5px;
    font-family: Tahoma, sans-serif;
    font-size: 12px;
    border: 1px solid #005695;
}

.group ul {
    margin: 0;
    padding: 0;
}

.levelOne li {
    border-top: 1px solid #DDD;
    list-style: none;
    position: relative;
}

.levelOne li:hover {

}

.internalMenu a,
    .levelThree a {
    width: 144px;
}

.levelOne li > a span {
    position: absolute;
    right: 5px;
    top: 34%;
    color: #777;
    font-size: 8px;
}
/*****************
*     Header     *
******************/
.head {
    height: 25px;
    text-align: center;
    border-bottom: 1px solid #005695;
    padding-top: 12px;
    font-weight: bold;
}

.header {
    font-size: 9px;
}

.header h2 {
    display: inline-block;
    margin: 5px 0 5px 9px;
    font-size: 11px;
    text-decoration: underline;
}

.header .close {
    float: right;
    border: 1px solid #777;
    color: #777;
    cursor: pointer;
    font-family: 'Comic Sans MS',serif;
    font-size: 12px;
    line-height: 12px;
    margin: 3px;
    padding: 1px 2px;
}

/****************
*     Levels    *
*****************/
.levelOne li > a  {
    display: block;
    height: 38px;
    color: #000000;
    font-size: 11px;
    text-decoration: none;
    padding: 4px 20px 4px 5px;
    vertical-align: bottom;
    min-height: 28px;
}

.levelTwo {
    left: 157px;
    position: absolute;
    top: 0;
    background: #FFF;
    height: 40px;
    width: 170px;
    z-index: 10;
    display: inline-block;

}

/****************
*   Level One   *
*****************/

/****************
*   Section 1   *
*****************/
.head0 .head,
.levelOne li > a span
{
    color: #ff6600;
}

.head0 .header,
.head0 li:hover,
.head0 .levelTwo li.active,
.head0 .levelTwo li.active:hover,
.head0 .levelFour  li.active,
.head0 .levelFour  li.active:hover {
    background: #F5E8DF;
}

.head0...