JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pricetag">
Challenge accepted!
<div class="recommend">
<span></span>
recommended!
</div>
</div>

SCSS

body {
  background: white;
}
#pricetag {
  position:relative;
  width: 150px;
  height: 250px;
  background: #ecf0f1;
  border-radius: 4px;
  margin: 20px;
  padding: 50px 5px;
  .recommend {
    position: absolute;
    &>span{
      background: #ff7f7f;
      position: absolute;
      left: 0;
      top: 0;
      left: 0;
      top: -113%;
      height: 82px;
      width: 100%;
      display: block;
      z-index: -1;
      transform: rotateX(69deg);
      border-top-left-radius: 10px 30px;
      border-top-right-radius: 10px 30px;     
      box-shadow: 0 7px 0 -1px rgba(0,0,0,0.1)
    }
    color: white;
    text-transform: uppercase;
    font-family: arial, sans-serif;
    font-size: 11px;
    text-align: center;
    transform: rotate(45deg);
    perspective: 130px;
    perspective-origin: 50% 10px;
    text-shadow: 1px 1px 1px #633;
    top: 14px;
    right: -18px;
    height: 28px;
    line-height: 28px;
    width: 92px;
    &:before, &:after {
      display: block;
      z-index: -2;
      content: '';
      height: 100%;
      width: 7px;
      background: #cf5f5f;
      top: 0;
      position: absolute;
    }
    &:before {
      border-bottom-left-radius: 5px 5px;
      transform: rotate(45deg);
      top: 10px;
      left: -13px;
    }
    &:after {
      border-bottom-right-radius: 5px 5px;
      transform: rotate(-45deg);
      top: 11px;
      right: -13px;
    }
  }
}