JSFiddle - React, Tailwind, and code Playground

by M Shameer

HTML

<div id="wrapper">
</div>

CSS

body {
	position: relative;
}

.image-wrapper {
	position: fixed;
	transform: translate(-50%, -50%);
    opacity: 1;
}

.image-wrapper.fade-out {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
html,body{width:100%; height:100%;}
#wrapper{width:50%; height:100%;border:1px solid #000;}

JavaScript

$(function(){
	var fadeDelay = 1000;
//	var fadeDuration = 1000;
    $('#wrapper').click(function(e){
		var div = $('<div class="image-wrapper">').css({"left": e.pageX + 'px',"top": e.pageY + 'px'}).append($('')).appendTo('#wrapper');
    var test = $('<textarea>').appendTo('#wrapper').focus();
    });
});