JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<button class="badge-new">
  <span class="text">
    New
  </span>
</button>

SCSS

.badge-new {
  position: relative;
  color: #fff;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
  padding: 0.5rem;
  text-decoration: none;
  border: 0;
  background-color: red;

  &::before {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: -27px;
    top: 0;
    width: 60px;
    background-color: rgba(255, 0, 0, 0.7);
    transform: skewX(35deg);
  }

  &::after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: -27px;
    top: 0;
    width: 60px;
    background-color: rgba(255, 0, 0, 0.7);
    transform: skewX(-35deg);
  }
  
  .text {
    position: relative;
    z-index: 10;
  }
}