JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="header__ribbon">
    <p>Complimentary Event -</p>
    <p class="header__ribbon--secondaryText">
      mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
    </p>
  </div>
</div>

CSS

.wrapper {
  text-align: center;
}

p {
  font-family: arial;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
}

.header__ribbon {
  padding: 10px 20px;
  background-color: #ad0304;
  color: #fff;
  width: 70%;
  max-width: 350px;
  text-transform: uppercase;
  font-size: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.header__ribbon:before,
.header__ribbon:after {
  position: absolute;
  content: '';
  top:0;
  border-top: 35px solid #ad0304;
  border-bottom: 35px solid #ad0304;
  display: inline-block;
  vertical-align: middle;
}

.header__ribbon:after {
  right: -35px;
  border-right: 35px solid transparent;
  border-left: 10px solid #ad0304;
}

.header__ribbon:before {
  left:-35px;
  top:0;
  border-right: 10px solid #ad0304;  
  border-left: 35px solid transparent;
}

.header__ribbon--secondaryText {
  font-size: 16px;
}