JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="blocks blocks_4up">
    <li>
      <div class="cut">
        <div class="cut-bd cut-bd_red">
          <div class="cut-hd cut-hd_red">
            <h3 class="hdg">Sometimes...</h3>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
        </div>
      </div>
    </li>
    </ul>

SCSS

body {
  background: blue;
}
.cut {
  overflow: hidden;
  padding: 0 0 30px;
}

.cut-bd {
  padding: 15px 15px 0;
  position: relative;
}

.cut-hd {
  margin: 0 0 5px;
  padding: 0 0 5px;
}

.cut-hd_red { border-bottom: 1px solid darken(#e74c3c,5%); }

.cut-bd_red {
  border-top: 5px solid #f39c12;
  background: #e74c3c;
  color: #ecf0f1;
  text-shadow: 1px 1px rgba(#ffffff,.2);
  &:before {
    content: "";
    width: 100%;
    height: 30px;
    position: absolute;
    top: 100%;
    right: 30px;
    background: #e74c3c;
  }
  &:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: -30px;
    position: absolute;
    top: 100%;
    left: 100%;
    border: 15px solid #e74c3c;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
}