JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div class="body-border"></div>
<div class="scrollable-content">
  <div class="page-content">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
  </div>
</div>

CSS

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: red;
}

.body-border {
  pointer-events: none;
  background-size: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  border: 20px solid;
  background: red;
}

.scrollable-content {
  padding: 20px;
}

.page-content {
  position: relative;
  background: white;
}