JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <div class="sidebar">
            <div class="logo"></div>
            <div class="menu-options">
                <p>yeeeeeep</p>
            </div>
        </div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    overflow-y: hidden;
}
.container {
    background-color : #458748;
    height: 100%;
}
.sidebar {
    height: 100%;
    width: 30%;
    background-color : #000000;

}
.logo {
    background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 30%;
    width: 100%;
    text-align: center;
    background-color: aqua;
    
    
}
.menu-options {
    background-color: #FFFFFF;
}
p {
    display: inline-block;
    color: #000000;
}