JSFiddle - React, Tailwind, and code Playground

by reine_rizmut

HTML

<a id="ads">
  <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>

CSS

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

#ads {
  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: 0;
  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: 0;
  left: 0;
  right: 0;
}