JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative;">
    <div class="discount-trap" style="display: block;">
        <div class="discount-trap__header">Save 15%</div>
        <div class="discount-trap__text">Stay in Jul/Aug</div>
    </div>
</div>

CSS

.discount-trap {
border-bottom: 33px solid #74c331;
  border-left: 33px solid transparent;
  border-right: 33px solid transparent;
  height: 0px;
  width: 150px;
    -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(-315deg);
  -moz-transform: rotate(-315deg);
  -ms-transform: rotate(-315deg);
  -o-transform: rotate(-315deg);
  transform: rotate(-315deg);
  text-align: center;
  position: absolute;
  top: 25px;
  color: white;
  text-shadow: 0px 1px 2px black;
}

.discount-trap__header {
    font-size: 14px; 
    margin-top: 2px;
}

.discount-trap__text {
    font-size: 10px;
}