JSFiddle - React, Tailwind, and code Playground

round ribbon

by bitstarr

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 Box */

.ribbon, .ribbon * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.ribbon {
	width: 600px;
	margin: 40px auto 10px;
	padding: 0 10px 4px;
	position: relative;
	color: black;
	background: #eee;
}
.ribbon h3 {
	display: block;
	height: 40px;
	width: 620px;
	margin: 0;
	padding: 5px 10px 5px 30px;
	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 {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	bottom: -11px;
	z-index: 10;
	left: 0;
}
/* Round */
.ribbon.round h3 {
	border-radius: 5px 0px 0px 0px;
}
.ribbon.round h3::before, .ribbon.round h3::after {
	width: 20px;
	height: 8px;
	bottom: -8px;
	border: none;
    border-top:2px solid rgb(193,0,0);
    border-left:1px solid rgb(193,0,0);    
    border-bottom:1px solid rgb(193,0,0);    
	background: rgb(61,0,0);
	border-radius: 5px 0px 0px 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3), inset 2px 1px 2px rgba(0,0,0,0.3);
}