JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topBar">
    <div id="left-div"> <a href="#">Login</a>

    </div>
    <div id="right-div"> <a href="#">Menu One</a>
 <a href="#">Menu Two</a>

    </div>
</div>
<div id="sliderArea"></div>
<div id="four-cols">
    <div id="col-one"></div>
    <div id="col-two"></div>
    <div id="col-three"></div>
    <div id="col-four"></div>
</div>

CSS

#left-div {
    float:left;
}
#right-div {
    float:right;
}
a {
    margin:10px;
}
#topBar {
    width:100%;
    display:inline-block;
}
#sliderArea {
    background-color:yellow;
    width:100vw;
    height:100vh;
}
#four-cols {
    margin:5px 100px 5px 100px;
}
#col-one {
    background-color:orange;
    height:125px;
    width:100px;
    display:inline-block;
}
#col-two {
    background-color:blue;
    height:125px;
    width:100px;
    display:inline-block;
}
#col-three {
    background-color:green;
    height:125px;
    width:100px;
    display:inline-block;
}
#col-four {
    background-color:red;
    height:125px;
    width:100px;
    display:inline-block;
}