JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<nav id="top">
    <div style="margin: 12px;">foo</div>
</nav>
<div class="top-bg"></div>
<div id="content"></div>

CSS

.top-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    z-index: 1;
}

#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    z-index:2;
}

#content {
    margin-top: 60px;
}

JavaScript

for (var i = 0; i <= 20; i++) {
    $('#content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis dolor in sem tempus rutrum. Nullam mattis sodales mi, eu bibendum ante porta quis. Phasellus dui sem, imperdiet at massa in, imperdiet vestibulum leo.</p>');
}