JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

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

CSS

.arrow {
	position: relative;
	background: #88b7d5;
  height: 100px;
}

.arrow:after {
	border: solid transparent;
  border-color: transparent;
	border-top-color: #88b7d5;
	border-width: 60px;
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -60px;
}