JSFiddle - React, Tailwind, and code Playground

by clarusdignus

HTML

<p>Click into and out of each box to toggle default and focus states:</p>

<p>
  <input type="text" size="20" value="" class="input" id="foo" placeholder="foo">
  <label></label>
</p>

<p>
  <input type="text" size="20" value="" class="input" id="bar" placeholder="bar">
  <label></label>
</p>

CSS

label {
  content: "";
  display: inline-block;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100px 100px;
  background-image: url("http://s30.postimg.org/5huu7u8ip/test.png");
  width: 50px;
  height: 50px;
  vertical-align: top;
  float: left;
}
#foo,
#bar {
  padding: 0 1em;
  /* padding-left: 50px; */
  font-size: 17px;
  height: 3em;
}
#foo + label {
  background-position: 0px 0px;
}
#bar + label {
  background-position: 0px -50px;
}
#foo:focus + label {
  background-position: -50px 0px;
}
#bar:focus + label {
  background-position: -50px -50px;
}