JSFiddle - React, Tailwind, and code Playground

by Damien_at_SF

HTML

<div id="frmLogin">
    <div id="bg"></div>
    <div id="text">BLAH BLAH HAHAHAH</div>
</div>

CSS

#frmLogin {
    
    position:relative;
    height:400px;
    width:800px;
    
}

#bg{
    
    position:absolute;
    width:100%;
    height:100%;
    border:1px solid black;
    background:#e6e6e6;
    
}

#text {
    background:transparent;
    position:absolute;
    width:100%;
    height:100%;
    border:1px solid black;
}

JavaScript

<!-- fade page onload -->
$(document).ready(function(){
    $('#page_effect').fadeIn(1000);
});
<!-- fade login form to color on hover -->
$(document).ready(function(){
$("#text").hover(
function() {
$("#bg").stop().fadeOut();
},
function() {
$("#bg").stop().fadeIn();
});
});