JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div class="arrow">
  test
</div>

CSS

.arrow {
  width: 200px;
  height: 40px;
  background-color: #fff;
  border: 1px solid grey;
  position: relative;
}

.arrow:after {
 content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 16px 0 0px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    bottom: -16px;
    left: 1px;

}

.arrow:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 19px 0 0px;
    border-color: grey transparent transparent transparent;
    position: absolute;
    bottom: -18px;

}