JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Three rotated boxes for base  -->
<div id="left_rot"></div>
<div id="str"></div>
<div id="right_rot"></div>
<!-- Nav  -->
<div id="nav">
    <!-- Option for Opening or Closing menu -->
    <input type="checkbox" id="switch" name="switch" class="chkbx">
    <label for="switch" class="pin"><span class="open">Open</span><span class="close">Close</span> Menu</label>	
    <!-- Links -->
    <span class="link" id="link1"><a href="#link1">Link1</a></span>
	<span class="link" id="link2"><a href="#link2">Link2</a></span>
	<span class="link" id="link3"><a href="#link3">link3</a></span>
	<span class="link" id="link4"><a href="#link4">link4</a></span>
	<span class="link" id="link5"><a href="#link5">link5</a></span>
	<span class="link" id="link6"><a href="#link6">link6</a></span>

</div>
<footer>
    	<h2>Polygon Navigation</h2>

    <p class="cr">CREATED BY THEKIDDEV</p>
</footer>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background:#3498DB;
}
#nav {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 350px auto;
    position: absolute;
    text-align:center;
}
#left_rot {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
#right_rot {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
#str {
    width: 200px;
    height: 350px;
    position: absolute;
    background: #E67E22;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:170px auto;
    text-align: center;
}
span {
    z-index:555 !important;
}
span a {
}
span a:hover {
    background:rgba(0, 0, 0, .1);
        -webkit-box-shadow: inset hoff voff blur color;
    -moz-box-shadow: inset hoff voff blur color;
    box-shadow: inset hoff voff blur color;hadow:inset 0 0 4px 0px rgba(0, 0, 0, .2);
   
}
.link a {
    margin-left: -80px;
    top:-142px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    font-size:24px;
    text-align:center;
    background:transparent;
    color:#fff !important;
    padding: 0px;
    position:absolute;
    text-shadow:0 2px 1px rgba(0, 0, 0, .2);
    -webkit-transition: all ease 0.50s;
    transition: all ease 0.50s;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
    height: 140px;
    width: 162px;
}
#link2 a {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
#link3 a {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}
#link4 a {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
#link5 a {
    -webkit-transform: rotate(240deg);
    transform:...