JSFiddle - React, Tailwind, and code Playground

by TCHdevlp

HTML

<div class="acc_container">         <!-- account manager -->
        <ul class="acc_manage">
            <li><a href="#login_box" class="popup_window left_box" style="color: red;">Login</a></li>
            <li><a href="#register_box" class="popup_window right_box" style="color: red;">Register</a></li>
        </ul>

        <div id="login_box" class="popup_box">
            <div class="popup_header">
                <h6 class="popup_title">Log In</h6>
                <a href="#" class="close"><img src="close_btn.png" class="btn_close" title="Close Window" alt="Close"/></a>
            </div>

            <div class="popup_body" >
                <p class="note create_acc">Don't have an account yet, create one <a href="#register_box" class="popup_window">here</a></p>
                <form method="post" class="user_input" action="#">
                    <fieldset class="textbox">
                        <label class="username">
                            <span>Username or email</span>
                            <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                        </label>
                        <label class="password">
                            <span>Passowrd</span>
                            <input id="password" name="password" value="" type="password" placeholder="Password">
                        </label>
                        <button class="acc_btn_action" type="button">Sign in</button>
                    </fieldset>
                </form>
                <p class="note"><a href="#">Forgot Password</a><p>
                <p class="note"><a href="#">Forgot Username</a><p>
                <p class="note"><a href="#">Further Help</a><p>
            </div>
        </div>


        <div id="register_box" class="popup_box">
            <div class="popup_header">
                <h6 class="popup_title">Register</h6>
                <a href="#" class="close"><img src="close_btn.png"...

JavaScript

$(document).ready(function() {
  $('a.popup_window').click(function(e){
      e.preventDefault();
    //Getting the variable's value from a link.
    var loginBox = $(this).attr('href');

    //Fade in the popup
    $(loginBox).fadeIn(300);

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() { 
    $('#mask , .popup_box').fadeOut(300 , function() {
        $('#mask').remove();  
    }); asda
    return false;
});
});