JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<div id="three-d">
Banner
</div>

<div id="topbarsize">
<ul id="topbar">
     <li> <a href="#">Title</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul> 
    </li>
    <li> <a href="#">Type</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
    <li> <a href="#">Format</a>
        <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

#three-d 
    {
    width: 80%;
    height: 100px;
    align: center;
    border: 1px solid #424242;
    background-color: #7ca0b6;
    margin: 20px auto;
    background-image: url('three-d.jpg');
    background-repeat:no-repeat;
    background-size:100% 100%;

    color: #fff;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font: 80px 'ChunkFiveRegular';
    text-align:center;
}


#topbarsize{
    width:80%;
    margin:0 auto;
    
    /* For testing purposes */
    background:#00ff00;
    height:100px;
}

#topbar{
    width: 80%;
    list-style-type: none;
}
#topbar > li:hover ul { display: inline;}

#topbar > li {
    float: left;
    margin-left: 20px; 
    margin-right: 20px;
    font-family:"Georgia";
}
#topbar > li > ul {
    display: none;
    top:32px;
    position: absolute; border-style:solid; padding-left:10px; padding-right:10px;
    border-width:1px; background-color:white;list-style-type: none;}     
}


.clear {
    clear: both;
}