JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
  <div class="header">
    <span>пыщь</span>
    <div class="title">Mini</div>
    <div class="price">100 500 ₽</div>
  </div>
  <div class="content">
    <p>Apples</p>
    <p>Butter</p>
    <p>Charlie</p>
  </div>
</div>

CSS

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00B7F3;
}

.item {
  color: #000;
  font-family: sans-serif;
  text-align: center;
  font-size: 16px;
  display: flex;
  flex-direction: column;
}

.header {
  color: #fff;
  background: linear-gradient(135deg, #ff850a 0%, #dc2c53 100%);
  padding: 1.25em 3em;
  letter-spacing: 2px;
}

.title {
  font-size: 175%;
  font-weight: 600;
}

.price {
  font-size: 150%;
}

.content {
  background: #eaeaea;
}

.content p {
  line-height: 2.5em;
  margin: 0;
}

.content p:nth-child(odd) {
  background: #E9E4E1;
}