JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<br>
<!-------------------------ONE---------------------------->
<div class="wrapper">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper rotate">
    <div class="triangle top black"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper">
    <div class="triangle top black"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper rotate">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<br>
<!-------------------------TWO---------------------------->
<div class="wrapper rotate">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper rotate">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<br>
<!-------------------------ONE---------------------------->
<div class="wrapper">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper rotate">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper rotate">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<br>
<!-------------------------TWO---------------------------->
<div class="wrapper rotate">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper rotate">
    <div class="triangle top"></div>
    <div class="triangle bottom"></div>
</div>
<div class="wrapper">
    <div class="triangle top"></div>
    <div...

CSS

*{padding:0px;margin:0px;}
body{margin-left:10px;background-color:whitesmoke;}

.wrapper{
    display:inline-block;
    width:50px;
    height:50px;
    //background-color:whitesmoke;
    //padding:4%;
    margin-top:-4px;
    overflow:hidden;
    margin-left:-4px;
}

.triangle{
    width:70.71px;
    height:70.71px;
    transition:all .1s;
}

.triangle:hover{
    background-color:lightgray;
    //opacity:.7;
}

.top{
    //background-color:whitesmoke;
    transform: rotate(45deg) translate(20px);
}

.bottom{
    //background-color:#ECECEC;
    transform: rotate(45deg) translate(-100px, -50px);
}

.black{
    background-color:black;
}

.red{
    background-color:crimson;
}

.black:hover{
    background-color:darkgray;
}

.rotate{
    transform: rotate(90deg)
}

JavaScript

// Logo

var triangle = document.getElementsByClassName('triangle');

for(i = 0; i < triangle.length; i ++){
    clicked(i);
}

function clicked(i){
    triangle[i].addEventListener("click", function(){
        console.log(i);
        if(triangle[i].className == "triangle bottom" || triangle[i].className == "triangle top"){
            triangle[i].className += " black";
        }else if(triangle[i].className == "triangle bottom black" || triangle[i].className == "triangle top black"){
            triangle[i].className = triangle[i].className.replace(" black", " red");
        }else if(triangle[i].className == "triangle bottom red" || triangle[i].className == "triangle top red"){
            triangle[i].className = triangle[i].className.replace(" black", "");
        }
    });
    //
}