JSFiddle - React, Tailwind, and code Playground

by vigneshwaranr

HTML

<div class="hex-row odd">
    <div class="hex red"></div>
    <div class="hex green"></div>
</div>
<div class="hex-row">
    <div class="hex black"></div>
    <div class="hex transparent"></div>
    <div class="hex gray"></div>
</div>
<div class="hex-row odd">
    <div class="hex purple"></div>
    <div class="hex blue"></div>
</div>

CSS

.hex-row {
    clear: left;
}
.hex-row.odd {
    margin-left: 21px;
}
.hex-row.odd > *{
    margin-bottom:3px;
    margin-top:12px;
}
.hex:before {
    content: "";
    width: 0; height: 0;
    border-bottom: 12px solid transparent;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    position: absolute;
    top: -12px;
}
.hex {
    margin-top: 10px;
    width: 42px;
    height: 24px;
    background-color: transparent;
    position: relative;
    float: left;
    margin-left: 0px;
    margin-bottom: 1px;
}
.hex:hover {
    /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.15, 1.15);
  -webkit-transition-duration: 200ms;
  -webkit-transition-timing-function: ease-out;
 
  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.15, 1.15);
  -moz-transition-duration: 200ms;
  -moz-transition-timing-function: ease-out;
 
  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.15, 1.15);
  -ms-transition-duration: 200ms;
  -ms-transition-timing-function: ease-out;
   z-index:1;
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
}
.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -12px;
    border-top: 12px solid transparent;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    cursor: pointer;
}
.hex.transparent:hover {
    cursor: auto;
}
.hex.red {background-color: #FF7471;margin-right:1px;}.hex.red:before {border-bottom-color: #FF7471;}.hex.red:after {border-top-color: #FF7471;}
.hex.green {background-color: #8AD4A5;}.hex.green:before {border-bottom-color: #8AD4A5;}.hex.green:after {border-top-color: #8AD4A5;}
.hex.black {background-color: #000;}.hex.black:before {border-bottom-color: #000;}.hex.black:after {border-top-color: #000;}
.hex.gray {background-color: #DFDFDF;margin-left: 1px;}.hex.gray:before {border-bottom-color: #DFDFDF;}.hex.gray:after {border-top-color: #DFDFDF;}
.hex.purple {background-color:...