JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>

CSS

body{background-color: #354052;}
    .main{height: 20px;margin: 10px auto;width: 900px;}
    .col{height: 100px;width: 100px;background: #ccc;float: left;margin-left: 10px;/*position: absolute;*/}

JavaScript

$(document).ready(function(){
        
        
        $('.col').click(function(){
            //$('.col').not(this).hide();
        	  var windowWidth = $(window).width();
        	  var windowHeight = $(window).height();
			  var divWidth = 250;
			  var divHeight = 250;
			  var test=(windowWidth-divWidth)/2;
            $(this).css("position", "absolute");
			  var marginLeft = $(this).css({"margin-left":(windowWidth-divWidth)/2});
			  var margintop = $(this).css({"margin-top":(windowHeight-divHeight)/2});
				var margintop = $(this).css({"transition": "ease-in 0.3s"});
        	$(this).animate({ 
        		width : '250px', 
        		height:'250px', 
        });

    });
});