JSFiddle - React, Tailwind, and code Playground

Вырез в блоке

HTML

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste modi in, aut, illo error voluptates quae cumque amet deserunt, quasi nam esse, omnis veritatis. Iusto, at magnam provident. Deleniti, vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste modi in, aut, illo error voluptates quae cumque amet deserunt, quasi nam esse, omnis veritatis. Iusto, at magnam provident. Deleniti, vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste modi in, aut, illo error voluptates quae cumque amet deserunt, quasi nam esse, omnis veritatis. Iusto, at magnam provident. Deleniti, vero!</li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

:root {
  --color: #e8eae7;
  --bg-color: #959ec9;
  --r: 50px;
  --rs: 20px;
  --size: calc(2*var(--r) - 20px);
  --perf-height: calc(4*var(--rs));
  --mask: radial-gradient(circle, transparent calc(var(--rs) - 1px), var(--bg-color) var(--rs)) repeat-x bottom center / calc(3*var(--rs)) var(--perf-height),
    radial-gradient(15px at top center, transparent calc(var(--r) - 1px), var(--bg-color) var(--r)) no-repeat top center / 100% calc(100% - var(--perf-height));
}

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', arial, sans-serif;
  //background: #333;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  padding: 20px;
  margin: 0;
  list-style-type: none;
  filter: drop-shadow(0 0 5px #999);
}

li {
  padding: calc(var(--r) + 20px) 20px;
  padding-bottom: 200px;
  margin-top: 50px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 200;
  background: linear-gradient(to bottom, #99a085, #ff133f);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  color: var(--color);
  
  

}