JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hex-grid">
    <div class="hexagon">
        <div class="outer">
            <div class="inner">	
                <a class="textWrapper" href="#hex1">
							<div class="text">
                            <div class="text-inner">
                           <img src="images/logo.png"><br><h3>This is some text that should appear near the top and fit the hexagon rather well</h3><br />
                           </div>
                           </div>
                          
						</a>

            </div>
        </div>
    </div>
    <div class="hexagon">
        <div class="outer">
            <div class="inner">	
                <a class="textWrapper" href="#hex2">
							<div class="text">
                            <div class="text-inner">
                           <img src="images/logo.png"><br><h3>This is some text that should appear near the top and fit the hexagon rather well</h3><br />
                           </div>
                           </div>
                           
						</a>

            </div>
        </div>
    </div>
    <div class="hexagon">
        <div class="outer">
            <div class="inner">	
                <a class="textWrapper" href="#hex3">
							<div class="text">
                            <div class="text-inner">
                           <img src="images/logo.png"><br><h3>This is some text that should appear near the top and fit the hexagon rather well</h3><br />
                           </div>
                           </div>
                          
						</a>

            </div>
        </div>
    </div>
    <div class="hexagon">
        <div class="outer">
            <div class="inner">	
                <a class="textWrapper" href="#hex4">
							<div class="text">
                            <div class="text-inner">
                           <img src="images/logo.png"><br><h3>This is some text that should appear near the top and fit the hexagon rather well</h3><br />
                        ...

CSS

/* hexagons */
 #hex-grid {
    text-align:center;
    width:600px;
    padding-left:80px;
    padding-bottom: 200px;
}
.hexagon {
    float:left;
    overflow:hidden;
    visibility:hidden;
    width:440px;
    height:320px;
    transform:rotate(120deg);
    margin:8px -77px -162px -77px;
}
.outer {
    overflow:hidden;
    width:100%;
    height:100%;
    transform:rotate(-60deg);
    position:relative;
    z-index:-1
}
.inner {
    overflow:hidden;
    position:relative;
    visibility:visible;
    width:100%;
    height:100%;
    transform:rotate(-60deg);
    background: url(http://placekitten.com/g/700/700) 50% 50% no-repeat;
    -webkit-backface-visibility: hidden;
    z-index:1;
    -webkit-font-smoothing: antialiased;
}
.textWrapper {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    z-index:500;
    background:rgba(0, 0, 0, 0.75);
    transition:all 0.s;
    -webkit-font-smoothing: subpixel-antialiased;
}
.textWrapper:hover {
    background:rgba(0, 0, 0, 0.85);
}
.text {
    display:table;
    color:#fff;
    width:240px;
    margin:0 auto;
    text-align:center;
    height:100%;
    font-family:'Dosis'
}
.text-inner {
    display:table-cell;
    vertical-align:middle;
    padding:20px 0 0
}
.text-inner img {
    max-width:240px;
    height:auto
}
.hexagon:nth-child(2n+0) {
    margin-top:172px
}