JSFiddle - React, Tailwind, and code Playground

HTML

<a id="my-ad" >
      <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>
</a>
<p class="lobster">Welcome to Paradise</p>

CSS

.sprite {
  background: url(http://sahud.mb.student.pens.ac.id/Spritesheet/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%;
	}

#my-ad {
          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: 20px;
      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: 156px;
      left: 0;
      right: 0;
      margin: auto;
    }

    .sprite-surfboard {
      position: absolute;
      top: 85px;
      right: 20px;
    }

 .lobster{
  font-family: 'Lobster', cursive;
  font-size: 40px;
  position:absolute;
  top:110px;
   left:170px;
   right:0px;
   color:#FFFF66;
}