JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  The quick brown fox jumps over the lazy dog.<br>
  いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす<br>
</p>

CSS

body {
  max-width: 24em;
}
p {
  --bg-color: #fed;
  --padding: 1em;
  --border-width: 0.5em;
  --border-color: #f93;
  --border-radius: 1em;
  --balloon-tail-angle: 60deg;
  --balloon-tail-from-angle: calc(90deg - var(--balloon-tail-angle) / 2);
  --balloon-tail-width: 2em;
  --balloon-tail-height: calc(1.15470054 * var(--balloon-tail-width)); /* 1.15470054 = 2 / sqrt(3) */
  --balloon-tail-bottom-offset: 1em;
  margin: 0 0 0 var(--balloon-tail-width);
  padding: var(--padding);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-color);
}
p::after {
  content: '';
  position: absolute;
  display: block;
  width: calc(var(--balloon-tail-width) + var(--border-width));
  height: var(--balloon-tail-height);
  background:
    conic-gradient(from var(--balloon-tail-from-angle) at calc(2 * var(--border-width)) calc(var(--balloon-tail-height) / 2), var(--bg-color) var(--balloon-tail-angle), transparent var(--balloon-tail-angle)) no-repeat,
    conic-gradient(from var(--balloon-tail-from-angle) at 0 calc(var(--balloon-tail-height) / 2), var(--border-color) var(--balloon-tail-angle), transparent var(--balloon-tail-angle)) no-repeat;
  transform: translate(calc(0em - var(--padding) - var(--balloon-tail-width) - var(--border-width)), calc(var(--padding) + var(--border-width) - var(--border-radius) - var(--balloon-tail-height) - var(--balloon-tail-bottom-offset)));
}