JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<div id="Wrapper">
    <div id="Header">
        <ul>
            <li> <a href="">
                <img src="http://placehold.it/14x20" />
                        Home</a>

            </li>
            <li> <a href="">
                <img src="http://placehold.it/14x20"/>
                        Bins</a>

            </li>
            <li> <a href="">
                <img src="http://placehold.it/14x20"/>
                        Kidzone</a>

            </li>
            <li><a href="">
                <img src="http://placehold.it/14x20" />
                        Why ?
                        </a>

            </li>
            <li> <a href="">
                    <img src="http://placehold.it/14x20"/>
                        How?</a>

            </li>
        </ul>
    </div>
</div>

CSS

#Wrapper {
    display:block;
    background-color: white;
    border-left-style:solid;
    border-left-color:#B8B8B8;
    border-left-width:1px;
    border-right-style:solid;
    border-right-color:#B8B8B8;
    border-right-width:1px;
    width: 800px;
    height: 100%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
}
#Header {
    width:800px;
    text-align:center;
}
#Header ul {
    list-style: none;
    display: inline-block;
    background:blue linear-gradient(0deg,transparent,#eee,transparent);
    padding:0 2em;
    margin:0;
    border-radius:1em;
}
#Header li {
    border-left-style:solid;
    border-left-width:1px;
    border-left-color:white;
   width:145px;
    text-align:center;
    float: left;
}
a:link, a:visited {
    line-height:30px;
    height:30px;
    background-image:linear-gradient(0deg,transparent,#eee,transparent),url("http://placehold.it/1x30/000");
    background-repeat:repeat-x;
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-decoration:none;
    font-size:18px;
    color:white;
    display:block;
}
a:hover, a:active {
    background-image:linear-gradient(0deg,transparent,#eee,transparent), url("http://placehold.it/1x30");
    background-repeat:repeat-x;
}
a,img {vertical-align:middle;}