JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="bubble"> </div>

CSS

.bubble 
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border-top: #000 solid 1px;
border-bottom: #000 solid 1px;    
}

.bubble:after 
{
content: "";
position: absolute;
bottom: -15px;
left: 185px;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble:before 
{
content: "";
position: absolute;
top: 250px;
left: 184px;
border-style: solid;
border-width: 16px 16px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}