JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

<script src="http://www.bitstorm.org/jquery/shadow-animation/jquery.animate-shadow-min.js"></script>
<fieldset id="contact">
    <legend>Shadow Input</legend>
    
    <label>
        <span>Name:</span>
        <span id="nameWrapper">
            <input id="name" name="name" type="text" value="with wrapper + animate plugin" />
        </span>
    </label>
    <label>
        <span>Name2:</span>
        <input id="name2" name="name2" type="text" value="CSS3 transition" />
    </label>
</fieldset>

CSS

body {font-family:Helvetica,Arial,sans-serif;}
label {display:block;padding:20px 0;}

#name {
    background: rgba(55,55,55, 0.6);
    height:2em;
    border: 1px dashed #666;
    width:200px;
    box-shadow:inset 0px 0px 10px #222;
    border-radius: 2px;
    outline:0;/* prevent webkit highlight on focus */
}

#nameWrapper {
    margin-left:15px;
    display:inline-block;
}

#name2 {
    margin-left:15px;
    background: rgba(55,55,55, 0.6);
    height:2em;
    border: 1px dashed #666;
    width:200px;
    box-shadow:inset 0px 0px 10px #222;
    border-radius: 2px;
    outline:0;/* prevent webkit highlight on focus */
    -webkit-transition: all 0.8s ease-in-out;
       -moz-transition: all 0.8s ease-in-out;
        -ms-transition: all 0.8s ease-in-out;
         -o-transition: all 0.8s ease-in-out;
            transition: all 0.8s ease-in-out;
}
#name2:hover {
    box-shadow:inset 0px 0px 10px #222,0px 0px 15px #750082;
}

JavaScript

// with wrapper & jQuery animate shadow plugin
$("#name").hover(function() {
    $(this).parent().stop().animate({
        boxShadow: "0px 0px 15px #750082"
    }, 800);
}, function() {
    $(this).parent().stop().animate({
        boxShadow: ""
    }, 800);
});