JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<div class="layer r">
  Lorem ipsum<br /><br />dolor sit amet
</div>
<div class="layer g">
  Lorem ipsum dolor sit amet,<br/> consectetur adipiscing elit,<br/> sed do eiusmod tempor incididunt ut<br/> labore et dolore magna aliqua.<br/> Ut enim ad minim veniam,<br/> quis nostrud exercitation ullamco<br/> laboris nisi ut aliquip<br/> ex ea commodo consequat.
</div>
<div class="layer b">
  Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtem.
</div>

CSS

html {
   height: 100%;
}
body {
  display: flex;
  min-width: 100%;
  min-height: 100%;
  /* max-width: 500px; */
  margin: 0;
  background: black;
  width: 100%
}
.layer {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  flex-basis: 100%;
  align-items: center;
  justify-content: center;
}
.r {
  border: 10px solid rgba(100, 0, 0, 0.4);
  background-color: rgba(100, 0, 0, 0.2);
  color: rgba(100, 0, 0, 0.6);
}
.g {
  border: 10px solid rgba(0, 100, 0, 0.4);
  background-color: rgba(0, 100, 0, 0.2);
  color: rgba(0, 100, 0, 0.6);
}
.b {
  border: 10px solid rgba(0, 0, 100, 0.4);
  background-color: rgba(0, 0, 100, 0.2);
  color: rgba(0, 0, 100, 0.6);
}
.g {
  margin-left: -100%;
}
.b {
  margin-left: -100%;
}

JavaScript

const output = document.createElement('div')
output.style.cssText = 'position:absolute;top:3px;left:50%;color:#fff;font:12px Arial;transform:translateX(-50%)'
document.body.appendChild(output)
output.innerText = `width: ${innerWidth}px`
addEventListener('resize', () => {
  output.innerText = `width: ${innerWidth}px`
})