JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<div class="arrow_box">Hello</div>
<div class="arrow_box">
  Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
  Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>
</div>

CSS

body {
  margin:100px;
  width:500px;
}
.arrow_box {
  background:#88b7d5;
  border:4px solid #c2e1f5;
  margin-bottom:10px;
  min-height:50px;
  padding: 10px;
  position:relative;
}
.arrow_box:after,
.arrow_box:before {
  border:1px solid transparent;
  content:" ";
  height:0;
  pointer-events:none;
  position:absolute;
  right:100%;
  top:10px;
}
.arrow_box:after {
  border-color:rgba(136, 183, 213, 0);
  border-right-color:#88b7d5;
  border-width:10px;
  margin-top:-10px;
}
.arrow_box:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #c2e1f5;
  border-width:12px;
  margin-top:-12px;
}