JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <head>
        <meta charset='UTF-8' />        
        <title>Test</title>
        <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        #navbar {
            width: 100%;
            height: 30px;
            background-color: yellow;
            display: inline;
            top: 0;
            left: 0;
            position: absolute;
        }
        #wrapper {
            background-color: red;
            width: 100%;
            height: 100%;
        }
        #main-wrapper {
            background-color: blue;
            width: 100%;
            height: 100%;
        }
        #sidebar {
            background-color: orange;
            width: 32px;
            height: 100%;
            float: left;
            display:inline;
        }
        #content {
            background-color: green;
            height: 100%;
            margin-left: 32px;
        }
        .clear { clear: both;}
        </style>
    </head>
    
    <body>
        <div id="wrapper">
            <div id="navbar"></div>
            <div class="clear"></div>
            <div id="sidebar"></div>
            <div id="content"></div>
        </div>
    </body>
</html>