JSFiddle - React, Tailwind, and code Playground

CSS Pop Up Modal

by Jennifer Perrin

HTML

<!-- TOP PANEL -->
<div class="main">
    <div class="panel">     
        <a href="#signup_form" id="jointop"><input type="button" value="Sign up" class="blue"/></a>
        <a href="#login_form" id="logintop"> <input type="button" value="Login" class="red"/></a>
    </div>
</div>
<!-- END OF TOP PANEL -->




<!----    POPUP #1    ----->  
<a href="#x" class="overlay" id="login_form"></a>
<div class="box">
	<h2>LOG IN</h2>
       <input type="text" class="text-field" placeholder="Username" />
       	<input type="password" class="text-field" placeholder="Password" />
       	<div id="buttons">  <input type="button" value="Login" class="red"/>
		<a href="#signup_form"><input type="button" value="Sign up" class="blue"/></a></div>
    <p><input type="checkbox" /> <label>Remember me</label></p>
        <p><a id="forg" href="#">Forgot Your Password?</a></p></br>

    	<a class="close" href="#close"></a>
<!-- error state it is not visible because: visibility:hidden -->
   <div class="error">
   <div class="errortext">Incorrect login or password</div>
   </div>
<!--end of error state -->
  
</div>
<!----- END OF POPUP #1  ----->  



        
<!----    POPUP #2    ----->  
<a href="#x" class="overlay" id="signup_form"></a>
<div class="box">

	<h2>SIGN UP</h2>
    	<input type="text" class="text-field" placeholder="email" />
    	<input type="text" class="text-field" placeholder="Password" />
    	<input type="text" class="text-field" placeholder="First name" />
    	<input type="text" class="text-field" placeholder="Last name" /> 
    <p><input type="checkbox" /><label>I agree <a href="#">terms and conditions</a></label></p></br></br>
    	<input type="button" value="signup" class="signup"/></br>
    	<p>Already have account? <a href="#login_form">Log In</a></p>
        <a class="close" href="#close"></a>

</div> 
<!----- END OF POPUP #2  ----->

CSS

body{
	margin:0;
	padding:0;
	font-family:Tahoma, Arial;
	font-size:11px;
	background-color:#f1f1f1;
}

html{
	background:url(../images/bg.png) repeat;
}

.panel{
	background-color:#e5e5e5;
	height:34px;
	padding:10px;
}

.panel a#logintop,.panel a#jointop{
	display:block;
	float:right;
	margin-right:1px;
	padding:2px 4px;
}

body{
	margin:0;
	padding:0;
}

.box h2,p,a,label{
	font-family:Exo, sans-serif;
}

a:link{
	text-decoration:none;
}

a:active{
	text-decoration:none;
}

a:visited{
	text-decoration:none;
}

.box{
	width:330px;
	height:auto;
	left:50%;
	top:10%;
	padding:15px;
	position:fixed;
	display:inline-block;
	background:#FFF;
	border-radius:5px;
	box-shadow:0 0 10px rgba(0,0,0,.4);
	text-align:center;
	border:1px solid #b4b1b1;
	visibility:hidden;
	z-index:10;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	-webkit-transition:opacity .5s, top .5s;
	-moz-transition:opacity .5s, top .5s;
	-ms-transition:opacity .5s, top .5s;
	-o-transition:opacity .5s, top .5s;
	transition:opacity .5s, top .5s;
}

.overlay:target+.box{
	top:42%;
	opacity:1;
	visibility:visible;
}

.overlay{
	background-color:rgba(0,0,0,0.6);
	bottom:0;
	cursor:default;
	left:0;
	opacity:0;
	position:fixed;
	right:0;
	top:0;
	visibility:hidden;
	z-index:1;
	-webkit-transition:opacity .5s;
	-moz-transition:opacity .5s;
	-ms-transition:opacity .5s;
	-o-transition:opacity .5s;
	transition:opacity...