JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="card__plus"></div>
</div>

<div class="card card--inv"></div>

CSS

.card {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  position: relative;
  border-radius: 10px;
  background-image: radial-gradient(circle at 50% calc(100% + 5px), transparent 40px, #fff 41px);
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}
.card--inv {
  background-image: radial-gradient(circle at 50% calc(0% - 5px), transparent 40px, #fff 41px);
}

.card__plus {
  position: absolute;
  right: 50%;
  bottom: -35px;
  transform:translate(50%);
  width:  60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
}

body {
  background: #ddd;
}