JSFiddle - React, Tailwind, and code Playground

by sundaramkumar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-wrapper">
  <input id="textbox" type="text" class="text-box"/>
  <label class="icon" for="textbox">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAVCAYAAAAnzezqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAChElEQVR42mJkwA4YgVgUiNWBWAyIuYH4FxC/BuJ7QPwYiP8wEAn+//+PUw4ggFiwWKwMxGlAbATE/4D4JxD/AGI2IOYEYlYgfgDES4D4EBD/ZqAAAAQQMuIA4gIgPgXE04DYFYiloRaDADM0VMyAuBGIzwHxBCAWJiYEcGGAAIKpYQfiyUB8FIhtiXSwLBCvA+Kt0GgiywEAAQTzWS3U57JkhNwOIF4E9QTJDgAIIJC8KRDfBmIHMqOOFZo4fchxAEAAgeTnAvFCaAIkF5QA8VlkAUFh4Qyo43BZzAZSAxBATECGIRDvAqmjwAFzoObwIom5CgoKroI5AiWrMTKyAeVWA33sCBBATFCxFxTmoA9A/BeINWAC79++jWBgYvoPcgTQQlZ0y/8zMf169/ZtNEAAMUGDnpFKWRm5cPoNdEQ41BGrQY5AtvzD27eRwKj4AxBAIItPA/EMaFogF0gA8XNoFHxBT6TAuF7J8O8fMzg9IFkO4gMEECgETgCxG7a4IgFkA/ERLJYjh8QfRiamH8iWgwBAAIGQDhDfBWJ/Mi0XgqYBe3KyIUAAwUIhHYivALE+iZbzAfFuIO5AKrJJcgBAACFXSsVAfAmIo4m03BRaDIOyryfUIyQ7ACCAGNFKNFA0FEIT1Bpo8fwZWuOBHMkFzWqh0IpKHsr/BsRZQLyY1OoYIICwZT9Q7RYPxC7QVP0eqToWgPoYlnNAcd8LxFFQ+WJoDfmPWAcABBA+xAZtkLgDcSAQewGxATQU0NsUHdBQAtnUj14x4YsCgABioCLIgxZEf6GNFUliHAAQQAxUBsFA/BQaBUegrSohfA4ACCAGGgAbaJYGRcc1IO7D5wCAAAMA7xOH5iRJ1y8AAAAASUVORK5CYII=" />
  </label>
</div>
<p class="text-here"></p>

CSS

.input-wrapper {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  left: 5px;
  z-index: 1;
  height: 10px;
  margin-top: -5px;
}

.icon img {
  display: block;  
}

.text-box {
  padding-left: 20px;
  height: 30px;
  width: 250px;
  /*pointer-events: none;*/
}

JavaScript

$(document).ready(function(){
  $('.icon').click(function(){
    $('.text-here').html('Please enter your username');
  });
});