JSFiddle - React, Tailwind, and code Playground

by Jowed

HTML

<title>Jowed</title>
<div id="header">
    <div id="home" class="nav"><br><b>Home</b></div>
    <div id="blog" class="nav"><br><b>Blog</b></div>
    <div id="media" class="nav"><br><b>Media</b></div>
</div>
<div class="right"></div>
<div class="left"></div>
<div id="footer"></div>

CSS

div {
    border-radius: 5px;
}
#header {
    border: 2px solid black;
    width: 88%;
    height: 125px;
    margin: 25px 25px 25px 25px;
    background-color: #5CA75C;
}
.nav {
    border-radius: 100%;
    border: 2px solid black;
    height: 110px;
    width: 110px;
    background-color: #003D14;
    text-align: center;
    font-family: Verdana;
    color: #99FF99;
    font-size: 28px;
}
#home {
    float: left;
    margin-left: 15%;
    margin-top: 3px;
    position: relative;
}
#blog {
    float: none;
    margin-left: 45%;
    margin-right: 45%;
    margin-top: 3px;
    position: relative;
}
#media {
    float: right;
    margin-right: 15%;
    margin-top: -113px;
    position: relative;
}
.right {
    width: 200px;
    float: right;
    height: 600px;
    border: 2px solid black;
    margin-right: 15%;
}