JSFiddle - React, Tailwind, and code Playground

by Don Johnson

HTML

<ul id="menu">
    <li>
        <div class="dropdown_3columns">
            <div class="col_3">
                 <h2>
   Client Control Panel
  </h2>

            </div>
            <div class="col_1">
                 <h3>
   Tickets
  </h3>

                <ul>
                    <li> <a href="#">Inbox</a> 
                    </li>
                    <li> <a href="#">Sent Tickets</a> 
                    </li>
                    <li> <a href="#">Received Tickets</a> 
                    </li>
                    <li> <a href="#">Compose Ticket</a> 
                    </li>
                </ul>
            </div>
            <div class="col_1">
                 <h3>
   Messages
  </h3>

                <ul>
                    <li> <a href="#">Broadcast Message</a> 
                    </li>
                    <li> <a href="#">Archived messages</a> 
                    </li>
                </ul>
            </div>
            <div class="col_1">
                 <h3>
   Actions
  </h3>

                <ul>
                    <li> <a href="#">Actions</a> 
                    </li>
                    <li> <a href="#">View actions</a> 
                    </li>
                </ul>
            </div>
            <div class="listSpacer">--> **this is the area**
                <div class="col_1">
                     <h3>
    History
   </h3>

                    <ul>
                        <li> <a href="#">User Log</a> 
                        </li>
                        <li> <a href="#">Actions Log</a> 
                        </li>
                    </ul>
                </div>
                <div class="col_1">
                     <h3>
    Contacts
   </h3>

                    <ul>
                        <li> <a href="#">View Contacts</a> 
                        </li>
                        <li> <a href="#">Edit Contacts</a> 
                        </li>
                    </ul>
                </div>
            </div>
        </div>
 ...

CSS

#menu {

 position:relative;
    list-style:none;
    width:96.9%;
    margin:20px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
 color: black;


    /* Background color and gradients */

    background: #e0e1e1;
    background: -moz-linear-gradient(top, #d6d6d6, #aeaeae);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d7d7d7), to(#013953));

    /* Borders */

    border: 1px solid #000000;


}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
z-index:5;
}

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #000;
    display:block;
    outline:0;
    text-decoration:none;

    /* text-shadow: 1px 1px 1px #000; */
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
    padding-right:21px;
    background:url("../img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("../img/drop.png") no.-repeat right 7px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;

    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background:...