JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo">Logo</div>  <!-- End DIV Logo -->
  <div id="mainmenu">
    <ul>
      <li>
        <h5>Menu I</h5>
        <ul>
          <li><a title="" href="">Biography</a> </li>
          <li><a title="" href="">Publications</a> </li>
        </ul>
      <li>
        <h5>Menu 2</h5>
        <ul>
          <li><a title="" href="">Demo</a> </li>
          <li><a title="" href="">Features</a> </li>
          <li><a title="" href="">Comparison</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 3</h5>
        <ul>
          <li><a title="" href="">Item 1</a> </li>
          <li><a title="" href="">Item 2</a> </li>
          <li><a title="" href="">Item 3</a> </li>
        </ul>
      </li>
      <li>
        <h5>Menu 4</h5>
        <ul>
          <li><a title="" href="">ddfd</a> </li>
          <li><a title="" href="">dsfd</a> </li>
        </ul>
      </li>
    </ul>
  </div>  <!-- End DIV Main Menu -->
 <div id="social">Social</div><!-- End DIV Social -->

CSS

Html, body {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: 'Open Sans', sans-serif; 
}

#logo {
	position: absolute;
	top: 35px;
	left: 20px;
	color: #000;
	font-size: 20px;
}

/* mainmenu */

#mainmenu {
	float:right;
	margin-top: 35px;
	padding-bottom: 10px; 
	overflow: hidden;
}
#mainmenu ul {
	float: right;
	margin: 0;
	color: #000;
	list-style: none;
}
#mainmenu ul li {
	display: inline-block;
	float: left;
	width: 140px;
	line-height: 20px;
}
#mainmenu>ul>li {
	margin-left: 20px;
}
#mainmenu ul li a {
	display: block;
	text-decoration: none;
	font-weight:600;
	font-size: 12px;
}
#mainmenu ul li a, #mainmenu ul ul:hover li a {
	color: #333;
	-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-webkit-transition-duration: .4s, .4s, .4s, .4s;
	-moz-transition-duration: .4s, .4s, .4s, .4s;
	-ms-transition-duration: .4s, .4s, .4s, .4s;
	-o-transition-duration: .4s, .4s, .4s, .4s;
	transition-duration: .4s, .4s, .4s, .4s;
	-webkit-transition-property: all, -webkit-transform;
	-moz-transition-property: all, -moz-transform;
	-ms-transition-property: all, -ms-transform;
	-o-transition-property: all, -o-transform;
	transition-property: all, transform;
}
#mainmenu ul ul li a:hover, #mainmenu ul ul li.current-menu-item a {
	color: #005EBC;
	-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-ms-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-webkit-transition-duration: .4s, .4s, .4s,...