JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <!--[if lt IE 9 ]>
   <script src="http://www.useragentman.com/tests/pointerEvents/js/polyClip/js/excanvas/excanvas.compiled.js"></script>
  <![endif]-->
  <script src="http://www.useragentman.com/tests/pointerEvents/js/canvg.js"></script>
  <script src="http://www.useragentman.com/tests/pointerEvents/js/polyClip/js/polyclip.js" 
  			data-polyclip-clippreference="SVG" 
  			data-polyclip-forcepointerevents="true"></script>
	<script src="http://www.useragentman.com/tests/pointerEvents/js/jquery.cycle.all.js"></script>
	<script src="http://www.useragentman.com/tests/pointerEvents/js/tv.js"></script>

<body>
  
  <main>
  	
  	<!-- http://www.flickr.com/photos/x-ray_delta_one/4355598762/ -->
  	<img src="http://www.useragentman.com/tests/pointerEvents/images/disney-tv.jpg" data-polyclip-width="495" data-polyclip-height="417" 
  			/>
    <div class="slides">
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/robot-with-kid.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/john-and-paul.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/kid-gun.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/wierd.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/please-stand-by.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/ebs.jpg" />
    	<img src="http://www.useragentman.com/tests/pointerEvents/images/mushroom-cloud.jpg" />
    </div>
  </main>
  
  
</body>
</html>

CSS

body {
    margin: 0px;
}

main {
	position: relative;
	width: 495px;
	height: 417px;
}

#exampleBlurb {
	position: absolute;
	margin-bottom: 0;
	width: 266px !important;
	left: 495px;
	margin-top: 0;
	padding: 10px;
	font-size: 13px !important;
	min-height: 390px;
	background: none !important;
	color: black !important;
}

#exampleBlurb a {
	color: blue;
}


[data-polyclip], .slides  {
	position: absolute !important;
	top: 0px;
}

[data-polyclip] {
	z-index: 10;
	pointer-events: none;
}

.slides {
    left: 61px;
    top: 195px;
    z-index: 5;
    cursor: pointer;
    transform: skew(0, 3deg) scale(0.89, 0.84);
    -webkit-transform: skew(0, 3deg) scale(0.89, 0.84);
    -ms-transform: skew(0, 3deg) scale(0.89, 0.84);
    
    
}

.slides, .slides img {
  height: 150px;
  width: 150px;
  border: none;
  margin: 0;
  padding: 0;
}


/* Let's make the slides blur */
.slides {
	filter: blur(1px);             
	-webkit-filter: blur(1px);      
	-moz-filter: blur(1px);
	-o-filter: blur(1px); 
	-ms-filter: blur(1px); 
	
	filter: url("data:image/svg+xml;utf8,<svg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'1\' /></filter></svg>#blur"); /* browsers that don't do non-SVG filters (Firefox) */
}

/* Lose the blur on mouseover */
.slides:hover {
  filter: none;  
	-webkit-filter: none; 
	-moz-filter: none;
	-o-filter: none; 
	-ms-filter: none;
}

html.ie.lte9 .slides,
body.ie9down .slides {
	
	/* We only do transforms for IE10 up so we don't lose the blur filter */
	-ms-transform: none;
	/* Adjustment to compensate for the how Visual filter moves the slides after transform */
	left: 68px;
    top: 202px;
  
	filter: progid:DXImageTransform.Microsoft.Matrix(
	            M11=0.89,
	            M12=0,
	            M21=0.046642923561907156,
	            M22=0.84,
	            SizingMethod='auto expand')
	        progid:DXImageTransform.Microsoft.Blur(pixelradius=1);
  
  
}

html.ie.lte9 .slides:hover,
body.ie9down...