JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ribbon round">
  <h3>Recent Events / Testimonials</h3>
  <p>Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.</p>
</div>

CSS

.ribbon, .ribbon * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.ribbon {
	width:300px;
	margin: 40px auto 10px;
	padding: 0;
	position: relative;
	color: black;
	background: #eee;
}
.ribbon h3 {
	//display: block;
	height: 40px;
	width: 100%;
	margin: 0;
	padding: 9px 0 0 10px;
//	position: relative;
//	left: -30px;
	//color: white;
	background: rgb(193,0,0);
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.ribbon h3::before,
.ribbon p::before{
   content: '';
	//display: block;
	width: 0;
	height: 0;
	position: absolute;
	bottom: -11px;
	z-index: 10;
	left: 0;
	width: 15px;
}
/* Round */

. h3::before{
	height: 45px;
	top: 0px;
	left: -14px;
	border: none;
	background: rgb(193,0,0);
//	border-bottom-left-radius: 10px;
	border-top-left-radius: 7px 4px;
}

.ribbon.round p::before{
	height: 7px;
	top: 40px;
	left: -14px;
	border: none;
	background: rgb(61,0,0);
	border-top-left-radius: 7px 4px;
	border-bottom-left-radius: 7px 4px;
}

.ribbon p{
	margin: 0;
	padding: 20px;
}