JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class='container'>
Some text here
<p class='recommended'>
  <span><span>Recommended</span></span>
</p>
</div>

SCSS

.container {
  margin: 30px;
  border: 1px solid silver;
  border-radius: 15px;
  height: 150px;
  padding: 25px;
  display: inline-block;
  text-align: center;
  position: relative;
  .recommended {
    z-index: 1;
    color: white;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    width: calc(100% + 30px);
    margin: 0 -15px 35px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: skewY(-10deg);
    span {
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 10px 0;
      background: teal;
      span {
        padding: 0;
        background: transparent;
        transform: skewX(10deg);
       }
    }
    &:before, &:after {
      display: block;
      position: absolute;
      width: 15px;
      height: 100%;
      top: 0;
      z-index: -1;
      background: navy;
      content: '';
      transform: skewY(20deg);
    }
    &:before {
      left: 0;
      transform-origin: 0 50%;
    }
    &:after {
      right: 0;
      transform-origin: 100% 50%;
    }
  }
}