JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="wrapper">
    <input type="text" id="search-field" value="Search" class="disabled" disabled="disabled"  />
    <div class="buttonwrapper">
        <div class="button disabled"></div>
    </div>
    <input type="text" id="search-field" value="Search" />
    <div class="buttonwrapper"><div class="button"></div></div>
</div>

CSS

body { background-color: #E3E5E8; }
#search-field { color:#999; margin-top: -10px; }
#search-field { color:#DDD; }
.buttonwrapper { display:inline-block; margin-top: 5px; height:24px; width:24px; border-radius:2px; }
.wrapper { width: 200px; height:25px; margin: 100px auto; }
.button { height: 16px; width: 22px; margin: 3px 6px 3px 3px; display:inline-block; background-image: url("http://agi.tangora.com/media/link-fw6.png"); background-position: left 16px;  }
.buttonwrapper:hover {   border-radius:2px; }
.button:hover { background-position: left 32px; cursor:pointer; border-radius:2px; }
.button.disabled { background-position: top left; cursor:default; }
.pressed {  }
.hovered {  }

JavaScript

$('.buttonwrapper').mouseover(function() {
    //alert("Clicked");
    //$(this).addClass("hovered");  
});

$('.buttonwrapper').mousedown(function() {
    //alert("Clicked");
    //$(this).removeClass("hovered");
    //$(this).addClass("pressed");
});

$('.buttonwrapper').mouseleave(function() {
    //alert("Clicked");
    //$(this).removeClass("hovered");
    //$(this).removeClass("pressed");
});

$('.buttonwrapper').mouseup(function() {
    //alert("Clicked");
    //$(this).removeClass("pressed");
});