JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="sidebar panel">
        <ul>
            <li><img src="images/add.png" id="add"><p class="txt-add"></p></li>
            <li><img src="images/view.png" id="view"><p class="txt-view"></p></li>
            <li><img src="images/setting.png" id="setting"><p class="txt-setting"></p></li>
            <li><img src="images/logout.png" id="logout"><p class="txt-logout"></p></li>
        </ul>
    </div>
    <div class="main-box panel">
        <h2>ONLINE SPOT VERIFICATION</h2>
    </div>
    <div style="clear: both;"></div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: helvetica, arial, sans-serif;
    width: 100%;
    overflow-y: scroll;
}

.main {
    width: 100%;
    height: 100%;
}

.panel {
    min-height: 100%;
}

.sidebar {
    width: 8%;
    background-color: #111;
    float: left;
    text-align: center;
}

.sidebar ul {
    padding: 24px 0;
}

.main-box {
    float: right;
    width: 90%;
    margin-left: 2%;
    background-color: #888;
}