JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<p class="filmreelCaption">This only needs one HTML element.</p>

CSS

.filmreelCaption {
position: relative;
display: inline-block;
font-size: 32px;
padding: 15px;
margin: 1em 0 3em;
border: 5px solid #5a8f00;
color: #333;
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.filmreelCaption:before {
content: "";
position: absolute;
bottom: -20px;
left: 40px;
border-width: 20px 20px 0;
border-style: solid;
border-color: #5a8f00 transparent;
display: block;
width: 0;
}

.filmreelCaption:after {
content: "";
position: absolute;
bottom: -13px;
left: 47px;
border-width: 13px 13px 0;
border-style: solid;
border-color: #fff transparent;
display: block;
width: 0;
}