JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id  accumsan urna. Fusce nibh leo, egestas eu laoreet in, consectetur vel  risus. Aliquam ante justo, venenatis in pulvinar id, dapibus ac nunc.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per  inceptos himenaeos. Nam quis magna lorem. Morbi vitae iaculis ipsum. Nam  cursus consequat consequat. Aliquam bibendum nibh nec ante elementum  sed lacinia arcu placerat. Proin neque lectus, consequat non placerat  sed, venenatis eget risus. Sed vehicula urna id sem dictum id lacinia  mauris commodo. Quisque elit ipsum, mattis non ultrices id, ornare quis  justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Vestibulum quis arcu eu risus vehicula condimentum. Curabitur porttitor  suscipit tellus, non volutpat purus vehicula in. Suspendisse potenti.  Maecenas sit amet diam a lacus molestie vulputate mattis vel diam.</p>
    <div class="background"></div>
</div>

CSS

.content {
    margin: auto;
    position: relative:
    text-align: center;
    width: 60%;
}

.content p {
    position: relative;
    z-index: 1;   
}

.background {
    background-color: #777;
    height: 100%;
    left:0;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 0;
}