JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>homesys Admin</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

</head>
<body>

<div id="mutti">
    <div id="menu">
        <ul id="menuContainer">
            <li class="" onclick="/admin/oink;">Oink</li>

            <li class="" onclick="/admin/super;">Piglet</li>
        </ul>

        <ul id="menuContainer" class="bottom">
        </ul>
    </div>
    <div id="tabarea">
        <div class="tab" id="tab_x">
            <div class="tabContent">

                <iframe name="iframe_y" class="iframe" src=""></iframe>
            </div>
        </div>
        <div class="tab nodisplay" id="tab_y">
        </div>
    </div>
</div>

<script>
$(document).ready(function() 
{

$.each([1,2], function (k, v)
{
$('#menuContainer.bottom').append('<li class="" onclick="location.href = \'\';"><a href="xxx">piggy</a></li>');
});



});
</script>

</body>
</html>

CSS

/* GLOBALS */

/* Override chrome's ugly input focus border */
*:focus {outline: none;}

body
{
    font-family: Tahoma, Verdana, Arial;
    font-size: 12px;

    color: #CCCCCC;
    background-color: #000000;
    
    margin: 0;
    padding: 0;
    
    height: 100%;
}

html
{
        height:100%;
        overflow:auto;
}

form
{
    margin: 0;
}

IMG
{
    border: 0;
}

a { text-decoration: none; color: #FFF}
a:hover {  text-decoration: underline; Xcolor: #214673}
a:link {  text-decoration: none; }
a:visited { text-decoration: none; }
a:visited:hover {  text-decoration: underline; Xcolor: #214673}

a:active
{
    outline: none;
}

a:focus
{
    -moz-outline-style: none;
}

.displaynone
{
    display: none;
}

.hidden
{
    visibility: hidden;
}

.visible
{
    visibility: visible;
}

.nodisplay
{
    display: none;
}


#container
{
    width: 955px;
    height: 100%;
    margin: 0 auto;
    vertical-align: top;
}


/* LOGIN */

#fvid
{
    z-index: 10;
    display: none;
}

#loginarea
{
    vertical-align:top;
    height: 500px;
    background:url(/c/img/login.jpg);
    
    position:relative;
}

#loginbox
{
    position: relative;
    left: 0px;
    top: 160px;
    width: 339px;
    height: 135px;
    background:url(/c/img/bckloginbox.png) no-repeat;
    
    z-index: 100;
    position: absolute;
}

#loginbox_header
{
    height: 25px;
}

#loginbox_content
{
    height: 60px;
    margin: 20px 0 0 40px;
}

#loginbox_bottom
{
    height: 30px;
    text-align: right;
    padding-right: 10px;
    padding-top: 6px;
}

.logininput
{
    background: transparent; 
    border: 0; 
    color: #94b1e6; 
    border-left: 1px solid #3162bd; 
    padding-left: 3px;
    margin-bottom: 10px;
}

/* ADMIN FRAME */

#mutti
{
    position: relative;
    width: 100%;
    height: 100%;

    background-color: #996633;
}

#menu
{
    position: relative;
    width: 100%; 
    height: 100px; 
    background-color: #bfaf80;
}

#tabarea
{
    position: absolute;
    width: 100%;
   ...