JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div class="nav"></div>
<div class="main">
    <h1>The sample heading</h1><br>
    <div class="ps">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eum accusamus praesentium quam magnam dolore quas commodi beatae soluta a voluptatibus molestiae officia placeat molestias voluptatem? Accusantium quam ut dolore!</p>
        <br>
    </div>
</div>
<div class="white"></div>

CSS

*{margin: 0;padding: 0; overflow: hidden;}
html,body{height: 100%; overflow: auto;}

body { background-color: red; position: relative;  }

.nav {height: 50px; background-color: rgb(64, 47, 71); position: fixed; top: 0px; width: 100%;}
.main {
    width: 480px; padding: 40px; background-color: white; min-height: 400px; margin: auto; margin-top: 70px;
}

.white {
    background-color: orange; width: 100%; height: 200px; 
    position: fixed; top: 50px; z-index: -1;
}

JavaScript

for(var i=0;i<15;i++) {
    $('.main').append($('.ps').eq(0).clone());
}