Discount ribbon

.card-023 {
  width: 240px;
  padding: 12px;
  background: #1c1c1e;
  border-radius: 18px;
  font-family: system-ui,sans-serif;
  color: #f5f5f7
}
.card-023__img {
  position: relative;
  height: 190px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 60%,#3a3a3c,#0b0b0c)
}
.card-023__img span {
  position: absolute;
  top: 14px;
  right: -28px;
  width: 110px;
  padding: 4px 0;
  text-align: center;
  transform: rotate(45deg);
  background: #ff453a;
  font-size: 11px;
  font-weight: 800
}
.card-023 h3 {
  margin: 14px 6px 4px;
  font-size: 15px;
  font-weight: 600
}
.card-023 p {
  margin: 0 6px 12px;
  font-size: 15px
}
.card-023 b {
  font-size: 18px
}
.card-023 s {
  margin-left: 8px;
  color: #8e8e93;
  font-size: 13px
}
.card-023 button {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: #f5f5f7;
  color: #1c1c1e;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s,transform .15s
}
.card-023 button:hover {
  background: #fff;
  transform: translateY(-1px)
}
.card-023 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

<article class="card-023">
  <div class="card-023__img"><span>-30%</span></div>
  <h3>Studio headphones</h3>
  <p><b>$199</b><s>$285</s></p>
  <button>Buy now</button>
</article>