JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="navBar1">
            <ul>
            <li class="headerList1"><a href="http://beben-koben.blogspot.com/">Home</a></li>
            <li class="headerList1"><span><a href="#">Posted</a></span>
            <ul>
            <li><a href="http://beben-koben.blogspot.com/search/label/Blogger">Basics</a></li>
            <li><a href="#">Beginner</a></li>
            <li><a href="#">Intermediate</a></li>
            <li><a href="#">Advanced</a></li>
            <li><a href="http://beben-koben.blogspot.com/search/label/Trik%20dan%20Tips">Master</a></li>
            </ul>
            </li>
            <li class="headerList1"><span><a href="#">Beben</a></span>
            <ul>
            <li><a href="#">Basics</a></li>
            <li><a href="#">Buttons</a></li>
            <li><a href="#">Logos</a></li>
            <li><a href="#">Web layouts</a></li>
            </ul>
            </li>
            <li class="headerList1"><span><a href="#">Koben</a></span>
            <ul>
            <li><a href="#">Basics</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">SEO</a></li>
            <li><a href="#">Widget</a></li>
            <li><a href="#">Template</a></li>
            </ul>
            </li>
            <li><span><a href="http://beben-koben.blogspot.com/search/label/Coded">C S S</a></span>
            <ul>
            <li><a href="#">Basics</a></li>
            <li><a href="http://beben-koben.blogspot.com/search/label/Javascript">jQuery</a></li>
            <li><a href="#">Ragam</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">Scripts</a></li>
            </ul>
            </li>
            </ul>
        </div>

CSS

#navBar1{float:left;width:98%;border:solid 2px #555;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;background:-moz-linear-gradient(bottom,#BDC7FF,#89F);background:-webkit-gradient(linear,left bottom,left top,from(#89F),to(#BDC7FF));-moz-box-shadow:1px 3px 3px #555}
#navBar1 ul{padding:0;margin:0;list-style:none;position:relative}
#navBar1 ul li{display:block;float:left;padding-top:9px;padding-bottom:9px}
#navBar1 ul li span{display:block}
#navBar1 ul li span a{border-left:solid #777 thin}
.headerList1 a{border-right:solid #777 thin}
#navBar1 ul li a{display:block;padding:5px;padding-left:13px;padding-right:13px;color:#eee;text-decoration:none;font-family:Tahoma,Geneva,sans-serif;font-size:95%}
#navBar1 ul li a:hover{color:#333;text-decoration:underline}
#navBar1 ul ul{border-right:solid #505e58 thin;position:absolute;top:47px;left:2500px;background:#eee;width:auto;border:thin solid #57F;font-size:70%;display:none}
#navBar1 ul li:hover ul{position:absolute;left:60px;display:block}
#navBar1 ul ul li{padding:0;padding-top:3px;padding-bottom:2px}
#navBar1 ul ul li a{border:none;color:#555}