JSFiddle - React, Tailwind, and code Playground

by alexoviedo999

HTML

<div class="board">
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <br>
    <div class="hex oddrow"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <br>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <br>
    <div class="hex oddrow"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <br>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
    <div class="hex"></div>
</div>

CSS

body {
    z-index: -100000;
}
.board {
    white-space: nowrap;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(2000px) rotateX(60deg) translateY(300px);
    -moz-transform: perspective(2000px) rotateX(60deg) translateY(300px);
    -ms-transform: perspective(2000px) rotateX(60deg) translateY(300px);
    -o-transform: perspective(2000px) rotateX(60deg) translateY(300px);
    transform: perspective(2000px) rotateX(60deg) translateY(300px);
    margin: 0 auto;
    width: 810px;
}
.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}
.hex {
    display: inline-block;
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}
.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex:hover {
    background-color: #C66;
    -webkit-transform: translateZ(10px) scale(1);
    -moz-transform: translateZ(10px) scale(1);
    -ms-transform: translateZ(10px) scale(1);
    -o-transform: translateZ(10px) scale(1);
    transform: translateZ(10px) scale(1);
}
.hex:hover:before {
    border-bottom: 30px solid #C66;
}
.hex:hover:after {
    border-top: 30px solid #C66;
}
.oddrow {
    margin-left: 54px;
}

JavaScript

//http://jtauber.github.com/articles/css-hexagon.html