JSFiddle - React, Tailwind, and code Playground

by alisamii

HTML

<div class="hero"></div>

CSS

.hero {
  position:relative;
  background-color:yellow;
  height:320px !important;
  width:100% !important;
  border-bottom: 1px solid red;
}
.hero:after {
  content:'';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -50px;
  width: 0;
  height: 0;
  border-top: solid 50px #e15915;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}