JSFiddle - React, Tailwind, and code Playground

by Elok Firdaus

HTML

<a id="mybanner" href="http://elokfirdaus.blogspot.co.id/">
	<div class="sprite sprite-clouds"></div>
	<div class="sprite sprite-beach"></div>
	</a>

CSS

.sprite {
	background: url(http://elokfirdaus.mb.student.pens.ac.id/TeknologiWeb/PemrogramanMultimedia/spritesheet.png);
	display: inline-block;
}
	.sprite.sprite-beach {
		width: 600px;
		height: 200px;
	}
	.sprite.sprite-clouds {
		width: 600px;
		height: 135px;
		background-position: 0 -216px;
	}
	.sprite.sprite-text {
		width: 448px;
		height: 36px;
		background-position: 0 -368px;
	}
	.sprite.sprite-map-marker {
		width: 53px;
		height: 83px;
		background-position: -464px -366px;
	}
	.sprite.sprite-map-marker-shadow {
		width: 27px;
		height: 11px;
		background-position: -562px -388px;
	}
	.sprite.sprite-surfboard {
		width: 462px;
		height: 144px;
		background-position: -598px -413px;
	}
  #mybanner {
			width: 600px;
			height: 200px;
			display: inline-block;
			background: #2486d6;
			overflow: hidden;
			position: relative;
		}
		.sprite-clouds {
			position: absolute;
			top: 0;
			left: 0;
		}