JSFiddle - React, Tailwind, and code Playground

by ilyador

HTML

<div id="page" role="main">

    <div id="nav">
      <div id="nav-in1">
        <div id="nav-in2">
          <div id="header">
            
          </div><!-- header -->
        </div>
      </div>
    </div><!-- nav -->

    <div class="gallery">
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div class="hexagon"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div>
      <div...

CSS

body {
  background-color: yellow;
}

#page {
  overflow-x: hidden;
  margin-top: 40px;
}

/* Navigation Hex */
#nav {
  position: absolute;
  top: -58px;
  left: -138px;
  width: 540px;
  height: 367px;
  display: block;
  z-index: 100;
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     -o-transform: rotate(90deg);
      transform: rotate(90deg);
}
#nav-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
#nav-in2 {
  width: 100%;
  height: 100%;
  background-color: red;
  visibility: visible;
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
}

/* Content inside navigation hex */
#header {
  position: absolute;
  width: 302px;
  height: 295px;
  top: 65px;
  left: 144px;
  background-color: green;
}

/* Heaxgon Gallery Structure */
.gallery {
  margin: 0 auto;
  width: 310px;
}
.hexagon:nth-child(5n+4) {
  margin-left: 51px;
}

.hexagon {
  display: inline-block;
  width: 100px;
  height: 200px;
  margin: -45px 0 -70px 0;
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(109deg);
     -moz-transform: rotate(109deg);
     -o-transform: rotate(109deg);
      transform: rotate(109deg);
  cursor: pointer;
}

.hexagon-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-38deg);
     -moz-transform: rotate(-38deg);
     -o-transform: rotate(-38deg);
      transform: rotate(-38deg);
  }
.hexagon-in2 {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url(http://placekitten.com/240/240);
  background-size: 106%;
  visibility: visible;
  -webkit-transform: rotate(-71deg);
     -moz-transform: rotate(-71deg);
     -o-transform: rotate(-71deg);
     ...