JSFiddle - React, Tailwind, and code Playground

HTML

<nav class='clear'>
  <menu class='clear'>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
      <div class="clear">
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
          <li><a href="#">Item 4</a></li>
        </ul>        
        <ul>
          <li><a href="#">Item 5</a></li>
          <li><a href="#">Item 6</a></li>
        </ul>        
      </div>
    </li>
    <li><a href="home">Contact</a>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
      </ul>        
    </li>
  </menu>
  <ul class='social clear'>
    <li><a href="home">Twitter</a></li>
    <li><a href="home">Facebook</a></li>
    <li><a href="home">Skype</a></li>
  </ul>
</nav>

CSS

.clear:after { content:''; display:block; clear:both;}
nav, menu, ul, li { margin:0; padding:0;}
ul, li { list-style:none;}
a { display:block; color:#000; text-decoration:none;}

nav { background:#cfcfcf;}
menu { float:left;}
menu > li { float:left; position:relative;}
menu a { padding:13px 20px; background:#cfcfcf;}
menu a:hover { background:#b6b6b6;}
menu > li > a { border-right:1px solid #fff;}
menu > li:first-child > a { position:relative; padding-left:44px;}
menu > li:first-child > a:before { content:''; position:absolute; left:10px; top:10px; width:24px; height:24px; background:#999;}
menu ul,
menu div { position:absolute; display:none; left:0; top:100%; width:200px;}
menu div { width:400px; background:#cfcfcf;}
menu div ul { float:left; position:static;}
menu ul { border-top:1px solid #fff;}
menu ul a { border-right:1px solid #fff; border-bottom:1px solid #fff;}

menu li:hover ul,
menu li:hover div { display:block;}
menu li:hover > a { background:#b6b6b6;}


.social { float:right; padding-top:6px;}
.social li { float:left; padding-right:6px;}
.social li a { position:relative; width:32px; height:32px; text-indent:-9000px;}
.social li a:before { content:''; position:absolute; left:0; top:0; width:32px; height:32px; background:#999; border-radius:50%;}