JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header id="header">
        header hodor header hodor
        header hodor header hodor
        header hodor header hodor
        header hodor header hodor
        header hodor header hodor
        header hodor header hodor
    </header>
    <div class="content" id='content'>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
                content-main</br>
    </div>
</body>

CSS

html, body {
    height:100%;
    overflow:hidden;
}

.header{
    width: 50%;
    background: yellow;
    position: fixed; 
    top: 0;
    left: 0;
    opacity: 1;
}

.content {
    height: 100%;
    background: green;
    
}

.content { overflow: auto; }

JavaScript

/*
function setup()
{
    setupMargin();
}

function setupMargin()
{
    var headHeight = document.getElementById('header').offsetHeight;
    console.log(headHeight);
    //document.getElementById('content').style.marginTop = headHeight + "px";
}*/