JSFiddle - React, Tailwind, and code Playground

by reine_rizmut

HTML

<a id="mybanner" >
<div class="sprite sprite-clouds"></div>
<div class="sprite sprite-beach"></div>
<div class="sprite sprite-text"></div>
<div class="sprite sprite-map-marker"></div>
<div class="sprite sprite-map-marker-shadow"></div>
<div class="sprite sprite-surfboard"></div>
<h1 class="sprite sprite-text">
  Feeling Stressed
</h1>
</a>

CSS

h1{
 font-family: 'Open Sans', sans-serif;
 padding-top: 40px;
 color: yellow;
}
#mybanner {
	width:600px;
	height:200px;
	display:inline-block;
	background:linear-gradient(to bottom, #2C67D5, #73ACE4 40%);
	overflow:hidden;	
	position:relative;
	}
.sprite-clouds{
	position:absolute;
	top:0;
	left:0;
}
.sprite-text{
	position:absolute;
	top:10%;
	left:0;
	right:0;
	margin:auto;
}
.sprite-map-marker{
	position:absolute;
	top:80px;
	left:0;
	right:0;
	margin:auto;
}
.sprite-map-marker-shadow{
	position:absolute;
	top:155px;
	left:0;
	right:0;
	margin:auto;
}
.sprite-surfboard{
	position:absolute;
	top:80px;
	right:20px;
}
.sprite {
	background: url(http://hedyysp.mb.student.pens.ac.id/PemrogramanMul/Praktikum8/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: 217px;
		height: 65px;
		background-position: -7% -34%;
		background-size:127%;
	}

JavaScript

WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();