JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/augmented-ui/augmented.css">

<div class="module" style="--pieces: 3;">
  <div class="clip" augmented-ui="tr-clip br-clip exe"></div>
  <div class="pieces">
    <div class="piece" augmented-ui="t-clip-x bl-clip-x br-clip-x exe"></div>
    <div class="piece" augmented-ui="t-clip-x bl-clip-x br-clip-x exe"></div>
    <div class="piece" augmented-ui="t-clip-x bl-clip-x br-clip-x exe"></div>
  </div>
</div>

https://news.ycombinator.com/item?id=20926990

CSS

.clip {
  height: 100%;
  background: orange;
  width: 200px;
  position: absolute;
}

.piece {
  width: 400px;
  height: 60px;
  --aug-t-height: 10px;
  --aug-t-width: 50px;
  --aug-t-origin-x: 75px;
  --aug-bl-height: 10px;
  --aug-br-height: 10px;
  --aug-bl-width: 57px;
  --aug-br-width: 310px;
  --aug-border: 1px;
  --aug-border-bg: skyblue;
  --aug-inset: 2px;
  --aug-inset-bg: blue;
  background: black;
  margin-bottom: -10px;
}

.module {
  position: relative;
  height: calc(var(--pieces) * 60px + 20px);
}

.pieces {
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: 50px;
}