JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<div class="maincontent products">
    <div class="hexagonarea">
  
      <ul>
        <li class="animated zoomIn prod pos1">product 1</li>
        <li class="animated zoomIn prod pos2">product 2</li>
        <li class="animated zoomIn prod pos3">product 3</li>
        <li class="animated zoomIn prod pos4">product 4</li>
        <li class="animated zoomIn prod pos5">product 5</li>
        <li class="animated zoomIn prod pos6">product 6</li>
        <li class="animated zoomIn prod pos7">product 7</li>
      </ul>
    </div>
  </div>

CSS

* {margin:0; padding:0}

.maincontent {
	float: left;
	width: 100%
}
.products {
	
	
}
.hexagonarea {
	width: 552px;
	height: 480px;
	position: relative;
	margin: 2% auto
}
.hexagonarea li { list-style:none; display:block; width:50px; height:50px; background:#C60}
.prod {
	position: absolute;
}
.pos1 {
	top: 156px;
	left: 162px;
}
.pos2 {
	top: 0;
	left: 170px;
	animation-delay: 2s;
}
.pos3 {
	right: 0;
	top: 85px;
	animation-delay: 3s;
}
.pos4 {
	bottom: 79px;
	right: 0;
	animation-delay: 4s;
}
.pos5 {
	bottom: 0;
	left: 170px;
	animation-delay: 5s;
}
.pos6 {
	bottom: 81px;
animation-delay: 6s;
}
.pos7 {
	top: 85px;
animation-delay: 7s;
}

JavaScript

$(document).ready(function(){

   $(".animated").click(function(){
  var i=1;
  var y=1;       
   $( "li" ).each(function( index ) {    
      $(".hexagonarea li.pos"+y).delay(1+i).animate({width:"0px",height:   "0px"});
       $(".hexagonarea li.pos"+y).css({overflow:"hidden"});
    i+=800;
    y+=1;   
   });
 });
});