JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="wrapper__title">Best Seller</div>
  <div class="wrapper__content">
    <ul class="wrapper__list">
      <li>Unlimited Access Video</li>
      <li>Saved Videos</li>
      <li>Offline Access</li>
    </ul>
  </div>
</div>

CSS

.wrapper {
  position: relative;
  width: 350px;
  font-family: 'Arial',sans-serif;
  box-shadow: 0 4px 67.2px 16.8px hsla(0,0%,65%,.22);
  -webkit-box-shadow: 0 4px 67.2px 16.8px hsla(0,0%,65%,.22);
}

.wrapper__title {
  background-color: #ff5e5c;
  border-radius: 10px 10px 0px 0px;
  padding: 25px;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 25px;
}

.wrapper__content {
  padding: 35px 25px;
}

.wrapper__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.wrapper__list li {
  position: relative;
  font-size: 14px;
  padding-left: 30px;
}

.wrapper__list li + li {
  margin-top: 20px;
}

.wrapper__list li:before {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff5e5c;
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}