JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<fieldset>
<p>
<input type="text" />
</p>
<p>
<input type="text" />
</p>
<p>
<input type="text" />
</p>
<p>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>
CSS
.foo {
background:#999;
padding:5px;
}
JavaScript
(function n(e){var f = e.eq(0);
if( f.length != 0 )
{
$('<div class="border"></div>').appendTo(f).css({
//border:'1px solid red',
position:'absolute',
top:$(f).position().top == null ? 0 : $(f).position().top,
left:$(f).position().left == null ? 0 : $(f).position().left,
width:$(f).width() + parseInt($(f).css('padding-left')) + parseInt($(f).css('padding-right')),
height:$(f).height() + parseInt($(f).css('padding-top')) + parseInt($(f).css('padding-bottom')),
zIndex:100000
});
f.show().animate({
opacity: 1
},150, function(){
n(e.slice(1))
$('.border', this).animate({
opacity:0
}, 500, function() {
//$(this).remove();
});
});
}
})(
$(":visible").not('html,body').css({opacity: 0})
)