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 class="clear"></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%;
}

#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;
}
.clear {
    clear: both;
}