JSFiddle - React, Tailwind, and code Playground

by moalla

HTML

<img src='http://static.adzerk.net/Advertisers/879d9e1805a6495a9e3cbeeffe6da2ad.png' alt='' />
<div id="menu">
    <ul>
        <li><a href="" title="Home Page" id="Home">Home</a></li>
        <li><a href="" title="About us" id="About_us">About Us</a></li>
        <li><a href="" title="" id="">Horizontal menu</a></li>
        <li><a href="" title="" id="">Horizontal menu</a></li>
        <li><a href="" title="" id="">Horizontal menu</a></li>
        <li><a href="" title="" id="">Horizontal menu</a></li>
        <li><a href="" title="" id="">Horizontal menu</a></li>
    </ul>
</div>

CSS

img{ width: 100%}
#menu{ background:#A1DBE6;/* min-width: 900px;*/ }
#menu ul { margin:0; padding:7px; list-style:none; border-top:2px solid #6C939A; width:800px}
#menu ul li { margin:0; padding:0; display: inline;}
#menu ul li a { color:#287786; font:normal 14px Georgia, "Times New Roman", Times, serif; margin:0; padding:7px; }
#menu ul li a:hover{ border-top:2px solid #287786; color:#fff; background:#287786;}