JSFiddle - React, Tailwind, and code Playground

by Swivelgames

HTML

<div id="meowcakes">
    <form id="applesauce">
        <label>
            Meowcakes:
            <input type="text" id="cherries" />
        </label>
    </form>
</div>

CSS

#meowcakes {
    border: 1px solid #aaa;
    width: 225px;
    margin: 20px;
    padding: 20px;
    border-radius: 4px;
    font-family: 'Helvetica', sans-serif;
}

JavaScript

$("#meowcakes").live("focusin mouseover",function(e){
    if(e.type=="focusin") {
        $(this).addClass("focussed");
    }

    $(this).css("border-color","#559");
});

$("#meowcakes").live("focusout mouseout",function(e){
    if(e.type=="mouseout" XOR $(this).hasClass("focussed")) {
        $(this).css("border-color","#aaa");
    }
});