JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Your DNA Awakening</title>
        <meta name="Description" content="Raise your vibration." />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
    </head>
    <body>
        <header>
        </header>
        <section class="one">
            <div class="hexagon"><div>Learn</div></div>
            <div class="hexagon"><div>Experience</div></div>
            <div class="hexagon"><div>Feedback</div></div>
            <div class="hexagon"><div>Inspiration</div></div>
            <div class="hexagon"><div>Events</div></div>
            <div class="hexagon"><div>The Blog</div></div>
            <div class="hexagon"><div>Contact</div></div>
            <div class="hexagon"><div>Follow</div></div>
            <div class="hexagon"><div>Friend</div></div>
        </section>
        <footer>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
            <script src="js/script.js"></script>
        </footer>
    </body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    margin: 0 auto;
    width: 1000px;
    background: #e6e6e6;
    font: normal 1em Impact "Gill Sans Light", "Gill Sans MT", Calibri, Trebuchet, "Trebuchet MS", Arial, sans-serif;
}

header {
    height: 275px;
}
section {
    min-height: 700px;
}

.hexagon {
    width: 200px;
    height: 110px;
    background: black;
    position: relative;
    -webkit-transform: scale(1.0000001);
    -moz-transform: scale(1.0000001);
    -o-transform: scale(1.0000001);
    -ms-transform: scale(1.0000001);
    -webkit-transition: opacity 250ms, -webkit-transform 250ms cubic-bezier(0,.917,.43,.918);
    -moz-transition: opacity 250ms, -moz-transform 250ms cubic-bezier(0,.917,.43,.918);
    -o-transition: opacity 250ms, -o-transform 250ms cubic-bezier(0,.917,.43,.918);
    float: left;
    margin: 25px;
    margin-top: 52px;
    margin-bottom: 52px;
    color: white;
    cursor: pointer;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: 100%;
}

.hexagon:before {
    content: "";
    position: absolute;
    top: -60px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 60px solid black;
    cursor: pointer;
}

.hexagon:after {
    content: "";
    position: absolute;
    bottom: -60px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 60px solid black;
    cursor: pointer;
}

.hexagon:nth-child(7n+5) {
    margin-left: 150px;
}

section:hover .hexagon {
    opacity: .4;
}

.hexagon:hover {
    -webkit-transform: scale(1.31);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    opacity: 1 !important;
}

.hexagon div {
    font: 300 1.5em Trebuchet, Trebuchet MS, "Helvetica Neue", Helvetica;
    -webkit-transition: -webkit-transform 250ms cubic-bezier(0,.917,.43,.918);
   ...

JavaScript

$(function(){

    jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
    def: 'easeOutQuad',
    swing: function (x, t, b, c, d) {
        //alert(jQuery.easing.default);
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
    },
    easeInQuad: function (x, t, b, c, d) {
        return c*(t/=d)*t + b;
    },
    easeOutQuad: function (x, t, b, c, d) {
        return -c *(t/=d)*(t-2) + b;
    },
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInCubic: function (x, t, b, c, d) {
        return c*(t/=d)*t*t + b;
    },
    easeOutCubic: function (x, t, b, c, d) {
        return c*((t=t/d-1)*t*t + 1) + b;
    },
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    },
    easeInQuart: function (x, t, b, c, d) {
        return c*(t/=d)*t*t*t + b;
    },
    easeOutQuart: function (x, t, b, c, d) {
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeInOutQuart: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    easeInQuint: function (x, t, b, c, d) {
        return c*(t/=d)*t*t*t*t + b;
    },
    easeOutQuint: function (x, t, b, c, d) {
        return c*((t=t/d-1)*t*t*t*t + 1) + b;
    },
    easeInOutQuint: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
        return c/2*((t-=2)*t*t*t*t + 2) + b;
    },
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    },
    easeOutSine: function (x, t, b, c, d) {
        return c * Math.sin(t/d * (Math.PI/2)) + b;
    },
    easeInOutSine: function (x, t, b, c, d) {
        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
    },
    easeInExpo: function (x, t, b, c, d) {
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d -...