JSFiddle - React, Tailwind, and code Playground

HTML

<html><body>
    <br class="space" />
    <div class="container">
        <nav id="menu">
            <ul><li><a href="#">First</a></li><li><a href="#">Second</a></li><li><a href="#">Third</a></li>
            </ul>
        </nav>
        <div id="main">
            @RenderBody()
        </div>
    </div>
    <br class="space" />
    <div class="container">
        <nav id="menu" class="myfloatedelement">
            <ul>
                <li><a ref="#">First</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
            </ul>
        </nav>
        <div id="main">
            @RenderBody()
        </div>
    </div>
</body>
</html>

CSS

body {
    background-color: #5C87B2;
    font-family: Arial;
    font-size: 80%;
}
#menu { 
    background-color: #E0E0E0; 
    border: solid 1px #000;
    text-align: right; 
}
#menu ul { margin: 0; padding: 0; display: block; }
#menu ul li { 
    display: inline-block;
    position: relative;
    vertical-align: top;
}
.myfloatedelement{
    overflow:auto;
}
.myfloatedelement ul{
    float:right;
    overflow:auto;
}
.myfloatedelement ul li{
    float:left;
}
#menu ul li a {
    padding: 5px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.8em;
    display: block;
    border: 0px solid #000;
    border-width: 0 0 0 1px;
}
#menu ul li a:hover{
    background-color: #fff;
}
#main { 
    background: white; 
    padding: 15px; 
    border-left: solid 1px #000; 
    border-right: solid 1px #000; 
    border-bottom: solid 1px #000;
    overflow: auto;
}

/* --------------------------------------------------------
    the content positioning and styling containers
-----------------------------------------------------------*/
#content { padding: 10px 0 0 0; clear: both; }