JSFiddle - React, Tailwind, and code Playground

HTML

<div id="triangle1"></div>
<div id="triangle2">
<div id="triangle3"></div>
<div id="triangle4"></div>

CSS

#triangle1 {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
    float:left;
    position:relative;
}
#triangle2

{
    width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid blue;
    position:relative;
    margin-left:50px;
}
#triangle3
{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
    float:left;
    position:relative;
    margin-top:-100px;

}
#triangle4
{
    width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid blue;
    position:relative;
    margin-top:-100px;
    margin-left:50px;

}