JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
  <div class="item__top">Верх</div>
  <div class="item__bottom">Низ</div>
</div>

<br>

<div class="item">
  <div class="item__top">Верх <br> Верх <br> Верх</div>
  <div class="item__bottom">Низ <br> Низ</div>
</div>

CSS

.item {
  box-shadow: 0 0 20PX 0 #999;
  border-radius: 15PX;
}


.item__top {
  border-radius: 15PX;
  padding: 10px;
  background: #fff;
  position: relative;
  z-index: 1;
}

.item__bottom {
  padding: 25PX 10PX 10PX 10px;
  margin-top: -15px;
  border-radius: 0 0 15PX 15PX;
  color: #fff;
  background: linear-gradient(to top, blue, red)
}

body {
  background: #fff
}