JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	
	<div class="clipped-box">
		
		<div class="content">
			<h1>CLICK TO DELETE ME</h1>
			<p>I'll explode into pieces!</p>
		</div>
				
	</div>
		
</div>

CSS

body {
	margin: 0;
	padding: 0;
	background: #f0fcff;
	font-family: 'adelle-sans', sans-serif;
	overflow: hidden;
	height: 100%;
}

.container {
	width: 300px;
	top: 150px;
	position: relative;
	margin: 0px auto;
}

.clipped-box {
	cursor: pointer;
	-webkit-transition: top 1.2s linear;
	transition: top 1.2s linear;	
}
.clipped-box div {
	z-index: 9999999;
	color: #fff;
	font-size: 1.6em;
	padding: 50px 20px;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	background: #4F9CC7;
}

.clipped-box div h1 {
	text-shadow: 2px 2px rgba(0,0,0,0.2);
}


.clipped-box, .clipped-box div {
	width: 300px;
	height: 300px;
	position: relative;
}

.clipped-box div {
	position: absolute;
	top: auto;
	left: 0;
	background-image: url("http://www.picamatic.com/show/2009/09/13/11/58/5067396_750x600.jpg");
	-webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;
	transition: transform 1.4s ease-in, background 0.3s ease-in;
}

JavaScript

$(document).ready(function() {
		
	// Generate the clips. In this case I'm using 5 (or 25 pieces)
	(genClips = function() {
		
		// For easy use
		$t = $('.clipped-box');
		
		// Like I said, we're using 5!
		var amount = 5;
		
		// Get the width of each clipped rectangle.
		var width = $t.width() / amount;
		var height = $t.height() / amount;
		
		// The total is the square of the amount
		var totalSquares = Math.pow(amount, 2);
		
		// The HTML of the content
		var html = $t.find('.content').html();
		
		var y = 0;
		
		for(var z = 0; z <= (amount*width); z = z+width) { 
		
			$('<div class="clipped" style="clip: rect('+y+'px, '+(z+width)+'px, '+(y+height)+'px, '+z+'px)">'+html+'</div>').appendTo($t);
			
			if(z === (amount*width)-width) {
			
				y = y + height;
				z = -width;
			
			}
			
			if(y === (amount*height)) {
				z = 9999999;
			}
			
		}
		
	})();
	
	// A quick random function for selecting random numbers
	function rand(min, max) {
		
		return Math.floor(Math.random() * (max - min + 1)) + min;
		
	}
	
	// A variable check for when the animation is mostly over
	var first = false,
		clicked = false;
	
	// On click
	$('.clipped-box div').on('click', function() {
		
		if(clicked === false) {
			
			// Has been clicked, so ignore any other click until this is reset.
			clicked = true;
			
			// Hide the content box so we can see the particles fly.
			$('.clipped-box .content').css({'display' : 'none'});	
	
			// Apply to each clipped-box div.
			$('.clipped-box div:not(.content)').each(function() {
				
				// So the speed is a random speed between 90m/s and 120m/s. I know that seems like a lot
				// But otherwise it seems too slow. That's due to how I handled the timeout.
				var v = rand(120, 90),
					angle = rand(89, 80), // The angle (the angle of projection) is a random number between 80 and 89 degrees.
					theta = (angle * Math.PI) / 180, // Theta is the angle in radians
					g = -9.8; // And gravity is -9.8. If you live on another planet...