JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-list  " id="product_list">	
			<div class="item ">
				<a href="#" data-id="228">
					<div class="item-top"><img width="211" height="165" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product66_26">					</div>
					<div class="item-bottom">
						<div class="item-product-title">Unicity Activate</div>
					</div>
                
				</a>
			</div>
			
			<div class="item ">
				<a href="#" data-id="227">
					<div class="item-top"><img width="165" height="193" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product55_24">					</div>
					<div class="item-bottom">
						<div class="item-product-title">Lean Complete</div>
					</div>
                
				</a>
			</div>
			
			<div class="item ">
				<a href="#" data-id="223">
					<div class="item-top"><img width="245" height="215" src="" class="et-portfolio-thumbnail img-responsive wp-post-image" alt="product44_21">					</div>
					<div class="item-bottom">
						<div class="item-product-title">Bios Life D</div>
					</div>
                
				</a>
			</div>

CSS

#product_list {
right: 0;
left: 0;
text-align: center;
}
.product-list .item {
display: inline-block;
position: relative;
border-radius: 3px;
margin: 4px;
overflow: hidden;
text-align: start;
background-color: #fff;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
-webkit-transition: border-radius 500ms cubic-bezier(0.4, 0, 0.2, 1), width 500ms cubic-bezier(0.4, 0, 0.2, 1), height 500ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.item-top {
width: 200px;
height: 200px;
}
.item-bottom {
padding: 8px;
line-height: 1.5;
}

JavaScript

$('.item').on('click','a',function(e){
    e.preventDefault();
    var target=$(e.currentTarget);
    var par=target.parent();
    	par.css({width:par.width()+'px',height:par.height()+'px'});
//par.css({height:'300px',width:'500px'});
  par.animate({height:'300px'},{"queue": false, "duration": 500}).animate({width:'500px'},500,'linear'); par.css({transform:'translate('+0+'px,'+50+'px)scale(1.1,1.1)'});
    par.css({'transform-origin':'0,0',zIndex:'9999'});
});