JSFiddle - React, Tailwind, and code Playground

by anothernick

HTML

<div id="wrap">
    <div id="head">
        <span id="logo"><h2>Meeeples</h2></span>
        <ul>
            <li>Home</li>
            <li>Browse</li>
        </ul>
        <ul id="user">
            <li>U</li>        
        </ul>
    </div>
    
    <div id="content"></div>
</div>

CSS

html,body{
    height:100%;
    margin: 0;
    font-family: helvetica;
}

#wrap{
    position:relative;
    width:100%;
    height:100%;
    /*background-color: #E9E9E9;*/
}
#head{
    position:absolute;
    top:0;
    height: 50px;
    width:100%;
    box-shadow: 0 1px 1px #BCBCBC;
    background-color: #EFEFEF;
}
#head ul{
    float:left;
    width: auto;
    height:30px;
    margin: 0 50px;
    list-style-type: none;
}
#head ul li{
    padding: 10px 20px;
    height:100%;
    display: inline-block;
    text-shadow: 0 1px 1px #FFF;
}
#head ul li:hover{
    background-color: #FF9900;
    color:#EFEFEF;
    text-shadow: 0 -1px 1px #BBB;
    /*box-shadow: -1px -1px 1px #BCBCBC;*/
}
#logo{
    float:left;
}
#head #user{
    width:auto;
    float:right;
    height: 30px;
    padding: 0;
    margin:0;
}
#head #user li:hover{
    background-color: #3299BB;
}

h2{
    margin:10px;
    text-shadow: 0 1px 1px #FFF;
    color: #444;
}