JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="text"></div>
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
</div>

CSS

:root {
  --x: 150px;
  --y: 100px;
  --w: 300px;
  --h: 200px;
  --r: 10px;
}

.box {
  position: relative;
  width: 600px;
  height: 400px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}

.item-1, .item-2, .item-3, .item-4 {
  position: absolute;
}

.item-1 {
  top: 0; left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: calc(var(--x) + var(--w)); height: var(--y);
}

.item-2 {
  top: 0; left: calc(var(--x) + var(--w)); right: 0;
  height: calc(var(--y) + var(--h));
  background: rgba(255, 0, 0, 0.5);
}

.item-3 {
  top: calc(var(--y) + var(--h)); left: var(--x); bottom: 0; right: 0;
  background: rgba(0, 255, 0, 0.5);
}

.item-4 {
  top:var(--y); left: 0; bottom: 0;
  width: var(--x);
  background: rgba(0, 0, 255, 0.5);
}

JavaScript

const textElem = document.querySelectorAll('.text')

textElem.forEach(item => {
  item.textContent = '测试文字'.repeat(176)
})