JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<div id="wow" class="">Shadow Border Effect
</div>

CSS

div{border:thin solid #F00;}
#wow{width:100px;margin:auto;padding:5px;}
.effect{
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -webkit-border-radius:5px;
    -webkit-border-top-right-radius:0;
    -moz-border-radius:5px;
    -moz-border-radius-topright:0;
    -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:0 3px 3px rgba(0,0,0,0.3);
}

JavaScript

$('#wow').live('mouseover',function(){
    $(this).addClass('effect');
});
$('#wow').live('mouseleave',function(){
    $(this).removeClass('effect');
});