JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<header class="index-header">
    <div class="header-action"><a class="a-action">Login / Signup</a></div>
</header>
<div class="a-login-panel">
<table class="a-login-tbl" border="0" cellspacing="10">
    <tr>
        <td>Email:</td><td>Password:</td>
    </tr>
    <tr>
        <td><input class="inpt-1" type="text" /></td>
        <td><input class="inpt-1" type="text" /></td>
    </tr>
    </table>
    <center><div id="a-signup-link">Don't have an account? Click <a href="/signup.php">here</a> to signup</div></center>
</div>
<div id="main-desc">
    <span>
        We provide you professional and amazing codes at amazingly cheap prices
    </span>
</div>

CSS

body {
    background: url('http://ranpict.com/wp-content/uploads/2013/05/Computer-Technology-Wallpaper.jpg');
    font-family: Arial;
}

a:hover {
    cursor: pointer;
}

.index-header {
    position: absolute;
    top: 0px; left: 0px;
    height: 90px; width: 100%;
    background-color: rgba(0,0,0,0.7);
    color: #DDD; font-size:13px;
}

.header-action {
    position: absolute;
    top: 10px; right: 50px;
    height: 70px; width: 150px;
    text-align: middle;
    background: url('http://www.surfixe.com/img/1369995800_55753.ico') no-repeat center left 20px;
    background-size: 30%;
}

.a-action {
    position: relative;
    top: 28px; left: 62px;
}

.a-action:hover {
    color: #FFF;
}

.inpt-1 {
    height: 30px; width: 220px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: inset 0 0 4px  rgba(0,0,0,0.5),
        0 0 8px  rgba(0,0,0,0.7);
    -moz-box-shadow: inset 0 0 4px  rgba(0,0,0,0.5),
        0 0 8px  rgba(0,0,0,0.7);
    box-shadow: inset 0 0 4px  rgba(0,0,0,0.5),
        0 0 8px  rgba(0,0,0,0.7);
    border: 1px #333;
    font-size: 16px;
}

.a-login-panel {
    color: #FFF;
    position: absolute;
    height: 200px; width: 600px;
    top: 50%; left: 50%;
    margin-top: -100px; margin-left: -300px;
    background-color: rgba(0,0,0,0.7);
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    display: none;
}

.a-login-tbl {
    position: relative;
    margin-left: auto; margin-right: auto;
    top: 38px;
}

#a-signup-link {
    position: relative;
    top: 55px;
}

#main-desc {
    position: relative;
    top: 370px; text-align: center;
    margin-left: auto; margin-right: auto;
    width: 800px;
    font-size: 42px; color:#FFF;
}

JavaScript

$(document).ready(function() {
$('.a-action').on('click', function() {
    $('.a-login-panel').fadeIn();
    $('#main-desc').hide();
})
})
$(document).ready(function() {
	$('html').click(function() {
		$(".a-login-panel").hide();
        $('#main-desc').show();
	});
	$(".a-login-panel").click(function(e) {
		event.stopPropagation();
		return false;
	});
	$(".a-action").click(function(e) {
		event.stopPropagation();
		return false;
	});
});