JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="menu">
        <div id="item1" class="menu_item"></div>
        <div id="item2" class="menu_item"></div>
        <div id="item3" class="menu_item"></div>
        <div id="item4" class="menu_item"></div>
    </div>
    <div id="weather">
        <div id="panel"></div>
    </div>
</body>

CSS

#menu, #weather {
    box-sizing: border-box;
    height: 100vh;
    margin: 0;
    padding: 2%;
}
#menu {
    float: left;
    width: 65%;
    padding-right: 1%;
}
#weather {
    float: right;
    width: 35%;
    padding-left: 1%;
}
.menu_item {
    width: 100%;
    height: 23.5%;
    margin-top: 2%;
    margin-bottom: 2%;
    border: solid black 0.2em;
}
.menu_item:first-child {
    margin-top: 0;
}
.menu_item:last_child {
    margin-bottom: 0;
}
#panel {
    border: solid black 0.2em;
    width: 100%;
    height: 100%;
}