JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="wrap">
    <div class="inner">
        <p>Maecenas malesuada. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Suspendisse feugiat.</p>
    </div>
</div>

SCSS

*{
    box-sizing: border-box;
}

.wrap{
    background-color: #ccc;
    position: relative;
    width: 100%;
    overflow: hidden;
    .inner{
        width: 50%;
        padding: 50px 15px;
        position: relative;
        background-color: #eee;
        font-family: sans-serif;
        z-index: 1;
        &:after{
            content: '';
            position: absolute;
            display: block;
            top: 0;
            bottom: -100%;
            left: 50%;
            width: 100%;
            background-color: #eee;
            z-index: -1;
            transform: matrix3d(0.1,0,0.00,0,0.00,1,0.00,0.05,0,0,1,0,0,0,0,1);
        }
    }
}