JSFiddle - React, Tailwind, and code Playground

by reine_rizmut

HTML

<div class="sprite sprite-beach"></div>
<div class="sprite sprite-clouds"></div>
<div class="sprite sprite-map-marker"></div>
<div class="sprite sprite-promo-text"></div>
<div class="sprite sprite-surfboard"></div>

CSS

.sprite{
	background: url(http://andikas.mb.student.pens.ac.id/images/spritesheet.png) no-repeat;
}
.sprite-beach{
	width :1042px;
	height:320px;
}
.sprite-clouds{
	width :1042px;
	height:250px;
	background-position:0 -317px;
}
.sprite-map-marker{
	width :397px;
	height:397px;
	background-position:-650px -600px;
	position:relative;
	left:600px;
}
.sprite-promo-text{
	width :600px;
	height:65px;
	background-position:-38px -600px;
	position:relative;
	top:-300px;
}
.sprite-surfboard{
	width :600px;
	height:277px;
	background-position:-45px -665px;
	position:relative;
	top:-300px;
}