JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <h1>Header stuff</h1>
</div>

<div class="sidebar">
    stuff1<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff2<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff3<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff4<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff5<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff6<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff7<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
</div>

<div class="content">
    <a href="#" class="tt">tooltip stuff</a><br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff2<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    <a href="#" class="tt">tooltip stuff2</a><br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff4<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff5<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff6<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
    stuff7<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/> stuff<br/>
</div>

CSS

h1 { margin: 0; }

.header {
    height: 50px;
    border-bottom: 1px solid black;
    text-align: center;
    padding: 0;
}

.sidebar {
    background-color: #00e9ff;
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 20%;
    overflow-y: auto;
}

.content {
    background-color: #ffd800;
    position: absolute;
    margin-left: 20%;
    width: 80%;
    top: 50px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 20px;
}

JavaScript

$(".tt").tooltip({
    placement: "top",
    title: "<h3>this is a test tooltip</h3>",
    html: true
});