JSFiddle - React, Tailwind, and code Playground

HTML

<section style="margin-top: -1px;">
<div onclick="classList.toggle('green');" class="triangle-top" style="margin-left: -58px;"></div>
<div onclick="classList.toggle('red');" class="triangle-bottom"></div>
<div onclick="classList.toggle('green');" class="triangle-top"></div>
<div onclick="classList.toggle('red');" class="triangle-bottom"></div>
<div onclick="classList.toggle('green');" class="triangle-top"></div>
<div onclick="classList.toggle('red');" class="triangle-bottom"></div>
<div onclick="classList.toggle('green');" class="triangle-top"></div><br>
</section>
<section style="margin-top: -1px;">
<div onclick="classList.toggle('green');" class="triangle-top" style="margin-left: -58px;"></div>
<div onclick="classList.toggle('red');" class="triangle-bottom"></div>
<div onclick="classList.toggle('green');" class="triangle-top"></div>
<div onclick="classList.toggle('red');" class="triangle-bottom"></div>
<div onclick="classList.toggle('green');" class="triangle-top"></div>
<div onclick="classList.toggle('red');" class="triangle-bottom"></div>
<div onclick="classList.toggle('green');" class="triangle-top"></div>
</section>

CSS

.triangle-top {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 100px 50px;
    border-color: transparent transparent #6980fe transparent;
    margin-left: -51.5px;
}
.triangle-bottom {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 50px 0 50px;
    border-color: #6980fe transparent transparent transparent;
    margin-left: -51.5px;
}
.red{
border-color: red transparent transparent transparent;  
}
.green{
border-color: transparent transparent green transparent;  
}