JSFiddle - React, Tailwind, and code Playground

CSS

.hex {
    color: gray;
    width: 100px;
    height: 58px; /*2*50/sqrt(3)*/
    margin: 34px 5px 0;
    background: currentColor;
    border: currentColor 0;
    display: inline-block;
    position: relative;
}
.hex:hover {
    opacity: .8
}
.hex:before, .hex:after {
    position: absolute;
    content: '';
    display: block;
    border-style: none solid;
    border-color: transparent;
    border-width: 0 50px;
}
.hex:before {
    top: -29px; /*50/sqrt(3)*/
    border-bottom-style: solid;
    border-bottom-color: inherit;
    border-bottom-width: 29px;
}
.hex:after {
    bottom:-29px;
    border-top: solid;
    border-top-color: inherit;
    border-top-width: 29px;
}
.halfhexblock {
    width: 55px;
    height: 1px;
    display: inline-block;
}
section {
    white-space: nowrap;
}

JavaScript

var i = 10;
var html = [];
while (i--) {
    var odd = i % 2;
    var j = 10 + odd;
    html.push('<section>');
    if (!odd) {
        html.push('<div class="halfhexblock"></div>');
    }
    while (j--) {
        html.push('<div class="hex"></div>');
    }
    html.push('</section>');
}
document.body.innerHTML = html.join('');

[].forEach.call(document.querySelectorAll(".hex"), function (h) {
    h.addEventListener('click', function () {
        this.style.color = this.style.color === 'red' ? 'gray' : this.style.color === 'blue' ? 'red' : 'blue';
    });
});