JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left; width:200px;">
<label>Height</label><br/><input type="text" value="400" class="hex-height"/><br/>
<label>Color</label><br/><input type="text" value="#0079c5" class="hex-color"/><br/>
<label>Hover Color</label><br/><input type="text" value="#009cff" class="hex-sel-color"/><br/>
<label>Animation Speed</label><br/><input type="text" value="500" class="hex-animation-speed"/>
</div>
<div class="hexa" style="margin-top:50px; margin-left:50px; float:left;"></div>

CSS

body {
   font-family:Arial;
   color:#333;
}
input {
   width:150px;
   margin-bottom:10px;
}
.t {
   position:relative;
}
.t div {
   position:absolute;
   width: 0px;
   height: 0px;
   border-style: solid;
   cursor:pointer;
   z-index:10;
}
.t div:nth-child(1) {
   transform:rotate(30deg);
   -webkit-transform:rotate(30deg);
   -moz-transform:rotate(30deg);
}
.t div:nth-child(1):hover {
   transform:rotate(30deg) translate(-15%, -10%);
   -webkit-transform:rotate(30deg) translate(-15%, -10%);
   -moz-transform:rotate(30deg) translate(-15%, -10%);
}
.t div:nth-child(2) {
   transform:rotate(90deg);
   -webkit-transform:rotate(90deg);
   -moz-transform:rotate(90deg);
}
.t div:nth-child(2):hover {
   transform:rotate(90deg) translate(-15%, -10%);
   -webkit-transform:rotate(90deg) translate(-15%, -10%);
   -moz-transform:rotate(90deg) translate(-15%, -10%);
}
.t div:nth-child(3) {
   transform:rotate(150deg);
   -webkit-transform:rotate(150deg);
   -moz-transform:rotate(150deg);
}
.t div:nth-child(3):hover {
   transform:rotate(150deg) translate(-15%, -10%);
   -webkit-transform:rotate(150deg) translate(-15%, -10%);
   -moz-transform:rotate(150deg) translate(-15%, -10%);
}
.t div:nth-child(4) {
   transform:rotate(-30deg);
   -webkit-transform:rotate(-30deg);
   -moz-transform:rotate(-30deg);
}
.t div:nth-child(4):hover {
   transform:rotate(-30deg) translate(-15%, -10%);
   -webkit-transform:rotate(-30deg) translate(-15%, -10%);
   -moz-transform:rotate(-30deg) translate(-15%, -10%);
}
.t div:nth-child(5) {
   transform:rotate(-90deg);
   -webkit-transform:rotate(-90deg);
   -moz-transform:rotate(-90deg);
}
.t div:nth-child(5):hover {
   transform:rotate(-90deg) translate(-15%, -10%);
   -webkit-transform:rotate(-90deg) translate(-15%, -10%);
   -moz-transform:rotate(-90deg) translate(-15%, -10%);
}
.t div:nth-child(6) {
   transform:rotate(-150deg);
   -webkit-transform:rotate(-150deg);
   -moz-transform:rotate(-150deg);
}
.t div:nth-child(6):hover {
  ...

JavaScript

var Hexagon = function() {
   var init = function(e, params) {
      var self = this;
      self.e = e;
      self.params = params;
      self.params['width'] = Math.round((Math.sqrt(3)/2)*self.params['height']);
      var str = "";
      str += "<div class='t'>";
         str += "<div></div>";
         str += "<div></div>";
         str += "<div></div>";
         str += "<div></div>";
         str += "<div></div>";
         str += "<div></div>";
      str += "</div>";
      self.e.html(str);
      self.e.find(".t").css({
         'width': self.params['width']+"px",
         'height': self.params['height']+"px"
      });
      var border_width = "0 "+Math.round(self.params['height']/4)+"px "+Math.round(self.params['width']/2)+"px "+Math.round(self.params['height']/4)+"px";
      var transform_origin = Math.round(self.params['height']/2)+"px "+Math.round(self.params['width']/2)+"px";
      var offee = Math.round(0.0675 * self.params['height'])+"px";
      var transition = "all "+self.params['animationSpeed']+"ms";
      self.e.find(".t div").css({
         'left': "-"+offee,
         'top': offee,
         'border-width': border_width,
         'transform-origin': transform_origin,
         '-webkit-transform-origin': transform_origin,
         '-moz-transform-origin': transform_origin,
         '-ms-transform-origin': transform_origin,
         '-o-transform-origin': transform_origin,
         'transition': transition,
         '-webkit-transition': transition,
         '-moz-transition': transition,
         '-ms-transition': transition,
         '-o-transition': transition,
         'border-color': "transparent transparent "+self.params['color']+" transparent"
      });
      self.e.find(".t div").hover(
      function() {
         $(this).css({
            'z-index': 20,
            'border-color': "transparent transparent "+self.params['colorSelected']+" transparent"
         });
      }, 
      function() {
         $(this).css({
            'z-index': 10,
 ...