JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div class="speech-bubble">
  <span>TEst test
  
  segsegs
  asgesg eageag . ageab<br/>
  aegqegageagaegeag</span>
</div>

CSS

.speech-bubble {
	position: relative;
	background: #00aabb;
	border-radius: .4em;
  max-width: 80%;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 20%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #00aabb;
	border-bottom: 0;
	border-left: 0;
	margin-left: -10px;
	margin-bottom: -20px;
}