JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainmenu">
                    <ul id="yw8">
<li class="active"><a href="/leads">Leads</a>
<ul>
<li><a href="/lead/create">Create</a></li>
<li><a href="/lead/freeze">6 months</a></li>
<li><a href="/searching">Searches</a>
<ul>
<li><a href="/searching/load/8">eeeee</a></li>
<li><a href="/searching/load/6">ывыв вава вава вава</a></li>
<li><a href="/searching/load/5">2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/property">Property</a>
<ul>
<li><a href="/property/create">Create</a></li>
</ul>
</li>
<li><a href="/profile">Profile</a></li>
<li><a href="/reminders">Reminders (1)</a></li>
<li><a href="/site/logout">Logout (AdamZ)</a></li>
</ul>                </div>

CSS

#mainmenu {
    height: 28px; /* need for eficient position*/
}
#mainmenu > ul > li {
    overflow: visible;
    display: block;
    float: left;
}
#mainmenu > ul > li ul {
    display: none;
    position: absolute;
    background: #FFF;
    padding: 0;
    height: auto;
}
/* drop down menu */
#mainmenu > ul > li > ul {
    margin-top: 4px;

}
/* others sub menus */
#mainmenu > ul > li > ul li ul {
    margin-top: -20px; /* align with parent*/
    left:99%;
    //width: 100%;
}

#mainmenu ul li:hover > ul {
    display: block;
}
#mainmenu ul li ul li a{
    padding: 4px 14px;
    background-color: #EFF4FA;
    color: #6399CD;
    text-decoration: none;
    display: block;
}
#mainmenu ul li ul li a:hover {
    color: #fff;
    //background:#0066CC
}

body
{
	margin: 0;
	padding: 0;
	color: #555;
	font: normal 10pt Arial,Helvetica,sans-serif;
	background: #ededed;
}

/*h1.mid_hed {
    text-align: center;
}*/

h1.mid_hed {
    background: none repeat scroll 0 0 #1F497D;
    border-bottom: 3px solid #7FFF00;
   
    clear: both;
    color: #fff;
    font-weight: normal !important;
    padding: 7px 0;
    text-align: center;
}
#page
{
	margin-top: 5px;
	margin-bottom: 5px;
	/*background: white;*/ 
/*	border: 1px solid #C9E0ED;*/
}

h1.p_up {
 
    text-transform: uppercase;
}
.rowss {
    text-align: center;
}
.rowsss {
    float: left;
}

.form_head {
    clear: both;
    color: black;
}
.main-link {
    background: none repeat scroll 0 0 hsl(216, 45%, 55%);
    border: 1px solid hsl(216, 56%, 41%);
    color: hsl(0, 0%, 100%);
    float: right;
    font-weight: bold;
    padding: 7px 12px;
   
}

a img {
    border: 0px solid #030000;
	margin-left: 25px;
}
select {
   
    width: 100%;
}
.muss {
    width: 30%;  
}
.row {
 
    width: 50% !important;
}
.row_left {
    float: left;
    width: 50%;
}
.row label {
    float: left;
    width: 100px;
}
.row input {
   /* float: left;*/
    width: 60%;
}

#header
{
	margin: auto;
	padding: 0;
	background: #ffffff; /* Old...