JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="hexGrid">
            <li class="hex">
                <a class="hexIn" href="#">
                    <img src="http://www.fearthewave.com/wp-content/uploads/2016/05/bevo-768x410.png" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
            <li class="hex">
                <a class="hexIn" href="#">
                    <img src="http://www.fearthewave.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-20-at-9.01.47-AM-768x503.png" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
            <li class="hex">
                <a class="hexIn" href="#">
                    <img src="http://www.fearthewave.com/wp-content/uploads/2016/01/Screen-Shot-2016-01-30-at-12.07.20-PM-768x500.png" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
            <li class="hex">
                <a class="hexIn" href="#">
                    <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
            <li class="hex">
                <a class="hexIn" href="#">
                    <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
        </ul>

CSS

#hexGrid {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    padding:0.866% 0;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
}
#hexGrid:after {
    content: "";
    display: block;
    clear: both;
}
.hex {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexIn {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
}

/*** HEX CONTENT **********************************************************************/
.hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

.hex h1, .hex p {
    width: 102%;
    left:-1%; /* prevent line on the right where background doesn't cover image */
    padding: 1%;
    color: white;
    box-sizing:border-box;
    background-color: #31364d;
    font-weight: 300;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
    bottom: 50%;
    padding-top:50%;
    font-size: 1.5em;
    z-index: 1;
    -webkit-transform:translateY(-100%) translatez(-1px);
        -ms-transform:translateY(-100%) translatez(-1px);
            transform:translateY(-100%) translatez(-1px);
}
.hex h1:after {
    content: '';
    position: absolute;
    bottom:...