JSFiddle - React, Tailwind, and code Playground

by prplxr

HTML

<!DOCTYPE html>

<html>

    <head>
    
        <title>asdf</title>
        
    </head>
    
    <body>
    
        <div id="wrapper">
            
            <div id="menu">
            
                <div id="innermenu">
                
                    <ul id="menulist">
                    
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk2</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk3</div></a></li>
                        <li class="menuitem"><a href="index.php"><div class="menulink">Lnk4</div></a></li>
                    
                    </ul>
                
                </div>
            
            </div>
        
        </div>
    
    </body>

</html>

CSS

html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#wrapper {
    width: 100%;
    height: 100%;
}

#menu {
    height: 70px;
    width: 100%;
}

#innermenu {
    padding-top:            25px;
    vertical-align:            bottom;
    text-align:                center;
    height: 45px;
    width: 100%;
    position:                relative;
    background-color:        #fff;
    outline:                    2px solid #555;
    box-shadow:                0px 0px 10px 2px #444;
}

#menulist {
    list-style-type:        none;
    margin-top:             20px;
    margin-bottom:             20px;
    margin:                    0px;
    padding:                0px;
}

.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

.menuitem:hover {
    background-color:        #8bb3d4;
}

.menuitem a {
    text-decoration:        none;
    color:                    #000;
}

.menulink {
    display:                inline;
    width:                    100%;
    height:                    100%;
}