JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="container">
  <div class="worrrrrrrrddd"></div>
</div>

CSS

html, body{height:100%;width:100%;position:relative}
.container{width:100%;height:100% !important;min-width:300px;min-height:300px;background:black}

JavaScript

var document_width = parseInt($('.container').width()),
	document_height = parseInt($('.container').height()),
	element_width = 400,
	element_height = 200,
	middle_left = (document_width - element_width) / 2
	middle_top = (document_height - element_height) / 2;

$('.worrrrrrrrddd').css({
   'background': 'red',
   'height': '10px',
   'width': '10px',
   'position': 'absolute',
   'top' : 0,
   'left' : 0 
}).animate({
	'top' : middle_top,
	'left' : middle_left,
	'height' : element_height,
	'width' : element_width
}, 1000, function() {
	setTimeout(function() {
  	$('.worrrrrrrrddd').css({
			'left' : 'auto'
		}).animate({
			'top' : 0,
			'right' : 0,
			'height' : 0,
			'width' : 0
  	}, 1000);
  }, 1000);
});