JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="foo">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque perspiciatis officiis doloribus obcaecati est! Voluptate ea porro explicabo eum, in itaque voluptatum! Nesciunt officiis, ullam consequuntur! Hic sapiente eaque, ipsam!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim culpa repudiandae excepturi reiciendis quod dignissimos suscipit reprehenderit commodi veniam, laudantium. Cum vitae voluptatum iste reprehenderit eaque, voluptatibus, nisi atque eius!
  <div class="bar">
    more text
  </div>
</div>

CSS

.foo {
  position: fixed;
  inset: 0;
  background: #f00;
  width: 50vw;
}

.bar {
  position: absolute;
  background: #0f0;
  width: 50vw;
  left: 10vw;
  top: 10vw;
  
  z-index: -100;
}