JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="tenpercent"></div>
<div class="clr"></div>

CSS

body, html {padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden;}

.clr {clear: both;}

.tenpercent {width: 10%; height: 100%; display: block; float: left; background-image: url(http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg); padding: 0; margin: 0;
background-size: auto 100%;
background-repeat:no-repeat;

JavaScript

function puzzle(){
	i=0;
	var br = false;
	var width = $(".tenpercent").width();
	$(".tenpercent").each(function(){
		$(this).css({"backgroundPosition":- i*width + "px 100%"});		
		i++;
	});
}
$(window).on('load', puzzle);
$(window).on('resize', puzzle);