JSFiddle - React, Tailwind, and code Playground

Sign In Form for TimeZone

by Jennifer Perrin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="user">
    <div class="user_options-container">
        <div class="user_options-text">
            <div class="user_options-unregistered">
                <h2 class="user_unregistered-title">Don't have an account?</h2>
                <p class="user_unregistered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
                <button class="user_unregistered-signup" id="signup-button">Sign up</button>
            </div>

            <div class="user_options-registered">
                <h2 class="user_registered-title">Have an account?</h2>
                <p class="user_registered-text">Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever street art fap.</p>
                <button class="user_registered-login" id="login-button">Login</button>
            </div>
        </div>

        <div class="user_options-forms" id="user_options-forms">
            <div class="user_forms-login">
                <h2 class="forms_title">Login</h2>
                <form class="forms_form">
                    <fieldset class="forms_fieldset">
                        <div class="forms_field">
                            <input type="email" placeholder="Email" class="forms_field-input" required autofocus />
                        </div>
                        <div class="forms_field">
                            <input type="password" placeholder="Password" class="forms_field-input" required />
                        </div>
                    </fieldset>
                    <div class="forms_buttons">
                        <button type="button" class="forms_buttons-forgot">Forgot...

CSS

/* =========================================================================
    Misc.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Muli:300,400,600,700");
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: "Muli", sans-serif;
    font-size: 12px;
    line-height: 1em;
}

button {
    background-color: transparent;
    padding: 0;
    border: 0;
    outline: 0;
    cursor: pointer;
}

input {
    background-color: transparent;
    padding: 0;
    border: 0;
    outline: 0;
}

input[type="submit"] {
    cursor: pointer;
}

input::-webkit-input-placeholder {
    font-size: .85rem;
    font-family: "Muli", sans-serif;
    font-weight: 300;
    letter-spacing: .1rem;
    color: #ccc;
}

input:-ms-input-placeholder {
    font-size: .85rem;
    font-family: "Muli", sans-serif;
    font-weight: 300;
    letter-spacing: .1rem;
    color: #ccc;
}

input::-ms-input-placeholder {
    font-size: .85rem;
    font-family: "Muli", sans-serif;
    font-weight: 300;
    letter-spacing: .1rem;
    color: #ccc;
}

input::placeholder {
    font-size: .85rem;
    font-family: "Muli", sans-serif;
    font-weight: 300;
    letter-spacing: .1rem;
    color: #ccc;
}


/* Animations */

@-webkit-keyframes bounceLeft {
    0% {
        -webkit-transform: translate3d(100%, -50%, 0);
        transform: translate3d(100%, -50%, 0);
    }
    50% {
        -webkit-transform: translate3d(-30px, -50%, 0);
        transform: translate3d(-30px, -50%, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes bounceLeft {
    0% {
        -webkit-transform: translate3d(100%, -50%, 0);
        transform: translate3d(100%, -50%, 0);
    }
    50% {
        -webkit-transform: translate3d(-30px, -50%, 0);
        transform: translate3d(-30px, -50%, 0);
    }
    100% {
        -webkit-transform:...

JavaScript

// Variables
var signupButton = document.getElementById('signup-button'),
    loginButton = document.getElementById('login-button'),
    userForms = document.getElementById('user_options-forms')

// Add event listener to the "Sign Up" button
signupButton.addEventListener('click', () => {
    userForms.classList.remove('login-click')
    userForms.classList.add('signup-click')
}, false)


// Add event listener to the "Login" button
loginButton.addEventListener('click', () => {
    userForms.classList.remove('signup-click')
    userForms.classList.add('login-click')
}, false)