JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="svg">
    <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0,0 H1 C1,0,1,0.419,1,0.44 C1,0.462,0.971,0.513,0.971,0.522 C0.971,0.532,1,0.581,1,0.603 C1,0.626,1,1,1,1 H0 V0.6 C0,0.582,0.029,0.528,0.029,0.519 C0.029,0.512,0,0.456,0,0.439 V0"></path></clipPath>
    </svg>
<div class="blocks">
  <div class="block block--1"></div>
  <div class="block block--2"></div>
</div>

CSS

svg {
  position: absolute;
  opacity: 0;
  z-index: -100;
}

.blocks {
  --mask-height: 100px;
  display: flex;
  justify-content: center;
}

.block {
  position: relative;
  width: 300px;
  background: linear-gradient(to bottom, purple calc(50% - var(--mask-height)), transparent calc(50% - var(--mask-height)) calc(50% + var(--mask-height)), purple calc(50% + var(--mask-height)));
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 10px;
}

.block::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: calc(var(--mask-height)*2);
  width: 100%;
  background: purple;
  clip-path: url("#my-clip-path");

}

.block--1 {
  height: 300px;

}

.block--2 {
  height: 600px;
}