JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<div class="card">
  <h4 class="card__title">Lorem ipsum</h4>

  <ul class="card__list">
    <li class="card__list-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nesciunt est, voluptatum voluptatem necessitatibus, facere earum?</li>
    <li class="card__list-item">Lorem ipsum dolor sit amet, conse</li>
    <li class="card__list-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates provident, quia soluta harum earum, hic maiores?</li>
    <li class="card__list-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam suscipit quod ipsum expedita eaque, ipsa ipsam dol</li>
    <li class="card__list-item">Lorem ipsum dolor</li>
  </ul>

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

CSS

.card {
  width: 50%;
  position: relative;
  border-radius: 10px;
  padding: 10px 30px;
  background-image: radial-gradient(circle at 100% 50px, transparent 30px, #fff 31px);
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5));
}

.card__list {
  padding: 0;
}

.card__plus {
  position: absolute;
  right: -25px;
  top: 25px;
  width: 50px;
  height: 50px;
  background-color: #ff5722;
  border-radius: 50%;
}

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(45deg, #fff, #b8e6e8);
  background-size: 20px 20px;
  height: 100%;
  margin: 0;
}