JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div class="bubble"><p>Leela, are you alright? You got wanged on the head. I could if you hadn't turned on the light and shut off my stereo.</p><p>Leela, are you alright? You got wanged on the head. I could if you hadn't turned on the light and shut off my stereo.</p></div>

CSS

body { background: #3b5998; font: 14px/20px "Helvetica Neue"; }
.bubble { width: auto; margin: 0 20px; padding: 20px; border: 2px solid #EEE; background: -webkit-linear-gradient(top, #444 0%, #222 15px); color: #FFF; -webkit-border-radius: 0.5em; -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.3), 0 0 1px 0 rgba(0,0,0,0.3), inset 0 0 3px 0 rgba(0,0,0,0.9), inset 0 2px 0 rgba(255,255,255,0.1); text-shadow: 0 1px 0 rgba(0,0,0,0.9); position: relative; }
.bubble:after { content: " "; display: block; left: 50%; margin-left: -4px; height: 7px; width: 7px; position: absolute; bottom: -6px; background: #222; border: solid; border-width: 0 2px 2px 0; border-color: #EEE; -webkit-transform: rotate(45deg); -webkit-box-shadow: inset -1px -1px 1px 0 rgba(0,0,0,0.9); }
p { margin-bottom: 20px; }
p:last-child { margin-bottom: 0; }