JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<!-- panel with buttons -->

<div class="main">

<div class="panel">

<a href="#join_form" id="join_pop">Sign Up</a>

</div>

     

</div>

     



<!-- popup form #2 -->

<a href="#x" class="overlay" id="join_form"></a>

<div class="popup">

<h2>Sign Up</h2>

<p>Please enter your details here</p>



<label for="email">Login (Email)</label>

<input type="text" id="email" value="" />


<label for="pass">Password</label>

<input type="password" id="pass" value="" />



<label for="firstname">First name</label>

<input type="text" id="firstname" value="" />



<label for="lastname">Last name</label>

<input type="text" id="lastname" value="" />

<input type="button" value="Sign Up" />&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Log In</a>



<a class="close" href="#close"></a>

</div>

CSS

main {

    background: #aaa url(../images/bg.jpg) no-repeat;

    width: 800px;

    height: 600px;

    margin: 50px auto;

}

.panel {

    background-color: #444;

    height: 34px;

    padding: 10px;

}

.panel a#login_pop, .panel a#join_pop {

    border: 2px solid #aaa;

    color: #fff;

    display: block;

    float: right;

    margin-right: 10px;

    padding: 5px 10px;

    text-decoration: none;

    text-shadow: 1px 1px #000;



    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    -ms-border-radius: 10px;

    -o-border-radius: 10px;

    border-radius: 10px;

}

a#login_pop:hover, a#join_pop:hover {

    border-color: #eee;

}

.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 .5s;
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    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-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4)...