JSFiddle - React, Tailwind, and code Playground

by tankchintan

HTML

<div id="outer-container">
    <div id="talk-bubble"></div>
</div>

CSS

#outer-container {
    padding: 40px;
}
#talk-bubble {
   width: 140px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talk-bubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}