JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="arrow direction"></div>
</div>

CSS

.main {
    background:red;
    height:50px;
    position:relative;
    margin-bottom: 100px;
}
.arrow {
    content:'';
    position:absolute;
    width: 0;
    height: 0;
    border-style: solid;
    margin-left: -15px;
    left:50%;
}
.direction {
    bottom: -30px;
    border-width: 30px 30px 0 30px;
    border-color: red transparent transparent transparent;
}
@media (min-width: 768px) {
    .direction {
        bottom: -30px;
        border-width: 0 30px 30px 30px;
        border-color: transparent transparent red transparent; 
    }
}
@media (min-width: 992px) {
    .direction {
        bottom: -60px;
        border-width: 30px 30px 30px 0;
        border-color: transparent red transparent transparent;
    }
}
@media (min-width: 1200px) {
    .direction {
        bottom: -60px;
        border-width: 30px 0 30px 30px;
        border-color: transparent transparent transparent red;
    }
}