JSFiddle - React, Tailwind, and code Playground

by Justin

HTML

<div> <a href="http://google.com/">
        <div class="hexagon chef">
            <div class="box left"></div>
            <div class="middle"><p>chef</p></div>
            <div class="box right"></div>            
        </div>
        <div class="underline"></div>
    </a>
 <a href="http://google.com/">
        <div class="hexagon adventurer">
            <div class="box left"></div>
            <div class="middle"><p>adventurer</p></div>
            <div class="box right"></div>
        </div>
        <div class="underline"></div>
    </a>
 <a href="http://google.com/">
        <div class="hexagon teacher">
            <div class="box left"></div>
            <div class="middle"><p>teacher</p></div>
            <div class="box right"></div>
        </div>
        <div class="underline"></div>
    </a>
 <a href="http://google.com/">
        <div class="hexagon biologist">
            <div class="box left"></div>
            <div class="middle"><p>biologist</p></div>
            <div class="box right"></div>
        </div>
        <div class="underline"></div>
    </a>

</div>

CSS

.hexagon {
    position: relative;
    width:150px;
    height: 45px;
    overflow: hidden;
    display: inline-block;
    margin: 20px;
}
.middle > p {
    margin-left: -24px;
    margin-top: 12px;
}
.chef > div {
    color: #525252;
    background-color: #FADC53;
}
.chef:hover > div {
    color: #FFF;
}
.adventurer > div {
    color: #FFF;
    background-color: #6F6D71;
}
.adventurer:hover > div {
    color: #525252;
}
.teacher > div {
    color: #525252;
    background-color: #39D8B2;
}
.teacher:hover > div {
    color: #FFF;
}
.biologist > div {
    color: #FFF;
    background-color: #E0BE47;
}
.biologist:hover > div {
    color: #525252;
}
a:hover .underline {
    display: block;
}
a {
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}
.underline {
    height: 2px;
    width: 102px;
    margin-top: -20px;
    margin-left: 42px;
    display: none;
    background-color: #FADC53;
}
.hexagon > div {
    display:inline-block;
}
.middle {
    height: 50px;
    position: absolute;
    text-align: center;
    left: 50px;
    width: 60px;
    background:orange;
    z-index:20;
}
.box.left {
    position: absolute;
    left: -143px;
    top:-83px;
}
.box.right {
    position: absolute;
    left: -85px;
    top:-73px;
}
.box {
    width:53px;
    height:53px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-transform: scale(1) rotate(61deg) translateX(140px) translateY(-100px) skewX(35deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(61deg) translateX(140px) translateY(-100px) skewX(35deg) skewY(0deg);
    -o-transform: scale(1) rotate(61deg) translateX(140px) translateY(-100px) skewX(35deg) skewY(0deg);
    -ms-transform: scale(1) rotate(61deg) translateX(140px) translateY(-100px) skewX(35deg) skewY(0deg);
    transform: scale(1) rotate(61deg) translateX(140px) translateY(-100px) skewX(0deg) skewY(35deg);
}