JSFiddle - React, Tailwind, and code Playground

HTML

<section style="margin-top: -1px;">
<div onclick="classList.toggle('red');" class="triangle-bottom" style="margin-left: -58px;"></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>
<div onclick="classList.toggle('red');" class="triangle-bottom"></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: 100px;
    height: 100px;
    background-color: #6980fe;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    margin-left: -51.5px;
}
.triangle-bottom {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #6980fe;
    -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    margin-left: -51.5px;
}
.red{
background-color: red; 
}
.green{
background-color: green;  
}