JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://image.ibb.co/ct0A3H/Amstrad_CPC_Gary_Linekers_Superstar_Soccer_Players_and_Misc.png"></script>
<div id="test" class="run">

</div>

CSS

.run {
	background-image: url('https://image.ibb.co/ct0A3H/Amstrad_CPC_Gary_Linekers_Superstar_Soccer_Players_and_Misc.png');
}

.run1 {
	background-position: -1px -1px;
	width: 23px!important;
	height: 28px!important;
}

.run2 {
	background-position: -20px -2px;
	width: 23px;
	height: 28px;
}

.run3 {
	background-position: -40px -2px;
	width: 23px;
	height: 28px;
}

.run4 {
	background-position: -58px -2px;
	width: 23px;
	height: 28px;
}

.run5 {
	background-position: -79px -1px;
	width: 23px;
	height: 28px;
}

.run6 {
	background-position: -100px -2px;
	width: 23px;
	height: 28px;
}

.run7 {
	background-position: -119px -2px;
	width: 23px;
	height: 28px;
}

.run8 {
	background-position: -140px -2px;
	width: 23px;
	height: 28px;
}

.run9 {
	background-position: -157px -2px;
	width: 23px;
	height: 28px;
}

.run10 {
	background-position: -174px 0px;
	width: 23px;
	height: 28px;
}

.run11 {
	background-position: -191px -2px;
	width: 23px;
	height: 28px;
}