JSFiddle - React, Tailwind, and code Playground

by fullblogdesign

HTML

<div id="toppic">
<div id="topwrapper">
<ul id="top">
<li class="home">
<a expr:href='data:blog.homepageUrl' title='Home'>HOME</a>
</li>
<li>
<a class="trigger" href="#" title="Kumpulan Trik ">Kumpulan Trik</a>
<ul>
<li>
<a href="#" title="tutorial">Tutorial</a>
</li>
<li>
<a href="#" title="label">Widget</a>
</li>
<li>
<a href="#" title="template">Template</a>
</li>
<li>
<a href="#" title="seo">SEO</a>
</li>
<li>
<a href="#" title="Tool">Tool</a>
</li>
<li>
<a href="#" title="widget">Widget</a>
</li>
<li>
<a href="#" title="Free Download">Download</a>
</li>
<li>
<a href="#" title="kode warna">Kode Warna</a>
</li>
</ul>
</li>
<li>
<a class="trigger" href="#" title="Ilmu Pertanian">Ilmu Pertanian</a>
<ul>
<li>
<a href="#" title="Info Music">Info music</a>
</li>
<li>
<a href="#" title="biodata">Biodata</a>
</li>
<li>
<a href="#" title="Free ">Free Mp3</a>
</li>
<li>
<a href="#" title="Penyakit">Penyakit</a>
</li>
<li>
<a href="#" title="Tanaman">Tanaman</a>
</li>
<li>
<a href="#" title="organik">Organik</a>
</li>
</ul>
</li>
<li>
<a href="#" title="Sofwere ">Software</a>
</li>
<li>
<a href="#" title="Puisi">Puisi</a>
</li>
<li>
<a href="#" title="kontes">Kontes</a>
</li>
<li>
<a href="#" title="movie">Movies</a>
</li>
<li>
<a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxxxx" title="follow me">Follow +</a>
</li>
<li>
<a class="babel" href="#" title="forum">Forum</a>
</li>
<li>
<a class="canal" href="#" title="index">Indeks</a>
</li>
</ul>
</div>
</div>

CSS

#toppic {
    width: 980px;
    height: 37px;
    background: url(http://4.bp.blogspot.com/-7v8BNAsq_RQ/UZRhGLMkiVI/AAAAAAAABuc/71y0y9S-EIc/s320/mega-dropdown.gif) repeat-x top;
    border-bottom: 1px solid blue;
    border-top: 1px solid blue;
    margin: 0 auto;
    padding: 0 auto;
    overflow: hidden;
    text-shadow: 1px 1px 2px #260600;
}

#topwrapper {
    width: 980px;
    height: 40px;
    margin: 0 auto;
    padding: 0 auto;
}

#top {
    width: 100%;
}

#top, #top ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#top a {
    border-right: 1px solid blue;
    text-align: left;
    display: block;
    text-decoration: none;
    padding: 10px 12px 11px;
    font: bold 14px Arial;
    text-transform: none;
    color: #eee;
}

#top a:hover {
    background: blue;
    color: #02f0ff;
}

#top a.trigger {
    background-image: url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);
    background-repeat: no-repeat;
    padding: 10px 24px 11px 12px;
    background-position: right center;
}

#top a.babel {
    border-right: none;
    background-image: url(http://4.bp.blogspot.com/-6qL00VoJnU4/UNO7vaoz8BI/AAAAAAAAAwc/XAOyGwE7oso/s1600/forum.gif);
    background-repeat: no-repeat;
    padding: 10px 25px 11px 12px;
    background-position: right center;
}

#top a.canal{
    border-right: none;
    background-image: url(http://3.bp.blogspot.com/-OT16LUIppr4/UNP5f0MfU0I/AAAAAAAAAxY/Qz5Bdq2BmDk/s1600/index3.png);
    background-repeat: no-repeat;
    padding: 10px 22px 11px 12px;
    background-position: right center;
}

#top li {
    float: left;
    position: relative;
}

#top li {
    position: static;
    width: auto;
}

#top li ul, #top ul li {
    width: 300px;
}

#top ul li a {
    text-align: left;
    padding: 6px 15px;
    font-size: 13px;
    font-weight: normal;
    text-transform: none;
    font-family: Arial, sans-serif;
    border: none;
}

#top li ul {
    z-index: 100;
    position: absolute;
...