JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="tri" id="a"></div>
    <div class="tri" id="b"></div>
    <div class="tri" id="c"></div>

CSS

.tri {
    border-color: black black transparent transparent;
    border-style: solid;
    border-width: 50px;
    width: 0;
    height: 0;
    -webkit-transform: rotate(225deg);
}

#a {
    box-shadow: 0 0 0px 100px red;
    opacity: 0.5;
    margin-left: 25px;
    margin-bottom: -150px;
}

#b {
    box-shadow: 0 0 0px 100px yellow;
    opacity: 0.5;
    float: left;
}

#c {
    box-shadow: 0 0 0px 100px blue;
    opacity: 0.5;
    margin-left: 50px;
}