JSFiddle - React, Tailwind, and code Playground

by Michael Seifert

HTML

<div class="ss-buttons">
  <div class="outer">
    <div class="inner">

      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
      <a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>

    </div>
  </div>
</div>

CSS

html,
body {
  min-width: 100%;
  height: initial;
}

body {
  line-height: 1;
}

html,
body,
div,
span,
a,
img,
p,
pre {
  border: 0;
  padding: 0;
  margin: 0;
}

img.sprite-32 {
  display: inline-block;
  width: 44px;
  height: 32px;
  z-index: 0;
}

.outer {
  width: 44px;
  display: inline-block;
  position: relative;
  height: 96px;
}

.inner {
  width: 44px;
  position: absolute;
  display: inline-block;
  left: 0px;
  z-index: 2000;
  top: 0px;
}

a {
  display: inline-block;
  height: 32px;
}

img.ss-zoom {
  background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
}

div.ss-buttons img {
  border: none;
  background-color: green;
}