JSFiddle - React, Tailwind, and code Playground

by Sander Koedood

HTML

<div id="wrapper">
    <div id="header"></div>
    <div id="nav">
        <center>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </center>
    </div>
</div>
<div id="footer">&copy; Mickael van Schie</div>

CSS

html {
    position: relative;
    min-height: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
body {
    background: rgb(230, 230, 220);
    overflow-x: hidden;
    margin: 0px;
    position: relative;
    min-height: 100%;
    height: auto;
}
#wrapper {
    width: 100%;
}
#header {
    width: 100%;
    height: 50%;
    background: rgb(100, 200, 100);
}
#nav {
    margin-left: auto;
    margin-right: auto;
    margin-top: -62px;
}
#footer {
    width: 100%;
    height: 15px;
    background: rgb(100, 200, 100);
    text-align: center;
    padding: 5px;
    font-family: arial;
    color: rgb(230, 230, 220);
    position: absolute;
    bottom: 0px;
}
.circle {
    height: 125px;
    width: 125px;
    border-radius: 90px;
    background-color: white;
    border: 5px solid rgb(70, 130, 70);
    display: inline-block;
    margin: 0px 40px 0px 40px;
    position: relative;
}