JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <h1 id="heading1">Heading</h1>
    <ul id="list">sd
<li id="li1"><h2>Heading 2.l</h2><p>Test</p></li>
<li id="li2"><h2>Heading 2.2</h2><p>Test</p></li>
</ul>
</div>

CSS

html, body { 
    background-color: #333333;
    margin: 0;
    padding: 0;
    height: 100%;
}

#main {
    background-color: red; 
    width: 80%; 
    margin: auto;
    min-height: 100%;
    height:100%;
    overflow: hidden !important;
}
#heading1 {
    background: yellow;
}
#list {
    background: green;
    height:100%;
    width: 80%;
    margin: auto;
    position: relative;
    overflow: hidden !important;
    height: 100%;
}
#list li {
    background: purple;
    width: 150px;
    height: 150px;
    position: absolute;
}
#li1 {
    top: -10px;
    left: 20px;
}
#li2 {
    top: 300px;
    left: 200px;
}