JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="box1">test</div>
<div class="box2">test</div>

SCSS

.box1, .box2 {
  border: 1px solid #ccc;
  padding: 1em;
  position: relative;
}

.box2 {
  &:after {
    content: '';
    border: 15px solid transparent;
    border-bottom: 10px solid red; // make white
    position: absolute;
    left: 1em;
    bottom: 100%;
  }
  &:before {
    content: '';
    border: 15px solid transparent;
    border-bottom: 10px solid blue; // make gray
    position: absolute;
    left: 1em;
    bottom: calc(100% + 2px);
  }
}