JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div class="site-wrapper">
    <div class="menu">
        <div class="nav">
            <ul>
                <li><a href="#">EXAMPLE</a>
                </li>
                <li><a href="/spots">EXAMPLE</a>
                </li>
                <li><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="content">
        <p id="notice"></p>
        <div class="container"></div>
    </div>
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin: 0px;
    display: block;
}
.site-wrapper {
    display: block;
    background-color: yellow;
    width: 100%;
    height: 100%;
}
.nav {
    background-color: red;
}
.content {
    background-color: blue;
    width: 300px;
    height: 300px;
}
.menu {
    font-weight: 400;
    top:50%;
    margin-top:-115px;
    position:absolute;
    width:100%;
    text-align: center;
    font-size: 12px;
    letter-spacing: .75;
}
p {
    margin:0;
}