JSFiddle - React, Tailwind, and code Playground

by volpeo

HTML

<div class="wrapper">
    <h2>Beautiful title</h2>
    
    <ul class="overflow-list">
        <li>Look me, look like I take 100% width !</li>
        <li>Look me, look like I take 100% width !</li>
        <li>Look me, look like I take 100% width !</li>
        <li>Look me, look like I take 100% width !</li>
    </ul>
    
    <p>This is content, I'm after the list and I don't want to be overlapped ! :(</p>
</div>

SCSS

body {
    background: #FFC2C2;
    margin: 0;
}
.wrapper {
    margin: 50px;
    background: white;
}

.overflow-list {
    position:absolute;
    width: 100%;
    list-style:none;
    padding: 0;
    left: 0;
    li {
        background: rgba(#0F0, 0.2);
        padding: 20px;
        width: inherit;
        border-bottom: 1px solid black;
        &:first-child {
            border-top: 1px solid black;
        }
    }
}