JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_div">
    <div class="red_ribbon"><span>Popular</span></div>
</div>

CSS

.main_div {
   width:300px;height:300px;
   position:relative;
   border:2px solid #000;
   background:grey;
}
.red_ribbon {
   position: absolute;
   right: -6px; top: -6px;
   z-index: 1;
   overflow: hidden;
   width: 80px; height: 80px; 
   text-align: right;
}
.red_ribbon span {
   font-size: 15px;
   color: #fff; 
   text-align: center;
   font-weight: bold; line-height: 22px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg); 
   width: 110px; display: block;
   background: #1C90F3;
   background: linear-gradient(#9BC90D 0%, #79A70A 100%);
   box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
   position: absolute;
   top: 20px; right: -22px;
}