JSFiddle - React, Tailwind, and code Playground

HTML

<div class="triangle top"></div>
<div class="triangle left"></div>
<div class="triangle right"></div>
<div class="triangle bottom"></div>

CSS

.triangle {
    width: 0;
    height: 0;
    border: solid 30px;
    margin: 20px;
}
.top {
    border-color: transparent transparent black transparent;
}
.left {
    border-color: transparent transparent transparent black;
}
.bottom {
    border-color: black transparent transparent transparent;
}
.right {
    border-color: transparent black transparent transparent;
}