JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="main-nav">
<li><a href="http://imagicallery.blogspot.com">Home</a></li>
<li><a href="http://imagicallery.blogspot.com">About </a>
  <ul>
 <li><a href="http://imagicallery.blogspot.de/p/about-me.html">Me</a></li>
  <li><a href="http://imagicallery.blogspot.com/p/about-this-blog.html">This blog</a>      </li>
  <li><a href="http://imagicallery.blogspot.com/p/ressources.html">Ressources</a></li>
  <li><a href="http://imagicallery.blogspot.com/p/legal-stuff.html">Legel stuff</a>   </li>
 </ul>
 </li>
 <li><a href="http://imagicallery.blogspot.com">Photography</a>
  <ul>
   <li><a href="http://imagicallery.blogspot.de/p/photography.html">Projects</a></li>
   <li><a href="http://imagicallery.blogspot.de/p/ausrustung.html">Equipment </a></li>
   <li><a href="http://imagicallery.blogspot.com/2012/09/13-fotografie-  fragen.html">Questions</a></li>
  </ul>
  </li>
   <li><a href="http://imagicallery.blogspot.com">Scrappy Art</a>
   <ul>
   <li><a href="http://imagicallery.blogspot.com/p/scrap-and-art.html">Scrapbooking</a>    </li>
   <li><a href="http://imagicallery.blogspot.com/p/art-journals.html">Art Journals </a>  </li>
   <li><a href="http://imagicallery.blogspot.com/p/mixed-media.html">Mixed-Media</a>  </li>
   <li><a href="http://imagicallery.blogspot.com/search/label/crop">Crops & Co.</a> </li>
   </ul>
   </li>
   <li><a href="http://imagicallery.blogspot.com/p/diy.html">DIY </a></li>
   <li><a href="http://imagicallery.blogspot.com">Freebies</a>
   <ul>
   <li><a href="http://imagicallery.blogspot.de/p/free.html">Free Stuff</a></li>
   <li><a href="http://imagicallery.blogspot.de/p/free.html">Free Tutorials</a></li>
   <li><a href="http://imagicallery.blogspot.com/p/legal-stuff.html">Terms of Use</a>   </li>
   </ul>
   </li>
   <li><a href="http://imagicallery.blogspot.com">Favorites</a>
    <ul>
    <li><a href="http://imagicallery.blogspot.com/p/and-you.html">Blogging Friends</a>  </li>
    <li><a...

CSS

.PageList {text-align:center !important;}
 .PageList li {display:inline !important; float:none !important;}
 ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}
 ul#main-nav li {margin:0;padding:0;list-  style:none;float:left;margin:0;width:9em;position:relative;}
 ul#main-nav li a {text- decoration:none;display:block;padding:0.6em;color:#0e0e0e;background:#cfcfcf;border-   left:2px solid #fff;border-right:2px solid #fff;}
 ul#main-nav li a:hover, ul#main-nav    li a:focus {background:#ece1cf;border-  left:2px solid gray;border-right:2px solid gray;}
 ul#main-nav li ul {padding:0;margin:0;display:none;position:absolute;
 ul#main-nav li ul li {float:none;}
 ul#main-nav li ul li a {font-size:0.9em;}