JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hex fll"></div>
<div class="hex fll"></div>
<div class="hex fll"></div>
<div class="clearer"></div>
<div class="halfhexblock">1</div>
<div class="hex fll"></div>
<div class="hex fll"></div>
<div class="clearer"></div><div class="hex fll"></div>
<div class="hex fll"></div>
<div class="hex fll"></div>
<div class="clearer"></div>

CSS

.hex {
    background-color:red;
    width:100px;
    height:50px;
    margin-top:46px;
    margin-bottom:0px;
    margin-left:5px;
    margin-right:5px;
    
    position:relative;
}
.hex:before, .hex:after {
    position:absolute;
    content:"";
    display:block;
    width:0px;
    height:0px;
    border-left-style:solid;
    border-left-color:transparent;
    border-right-style:solid;
    border-right-color:transparent;
    border-left-width:50px;
    border-right-width:50px;
}
.hex:before {
    top:-40px;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-bottom-width:40px;
}
.hex:after {
    bottom:-40px;
    border-top:solid;
    border-top-color:red;
    border-top-width:40px;
}
.fll {
    float:left;
}
.clearer {
    clear:both;
}
.halfhexblock {
    width:55px;
    float:left;
}

JavaScript

var allhexes = document.body.getElementsByClassName("hex");
for (var i=0; i<allhexes.length;i++) {
    allhexes[i].addEventListener("click",function() {
        this.style.backgroundColor="blue";
    }, false);
}