JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/LoginRegistrationForm/css/animate-custom.css" />
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>





    <div align="center" id="login" class="animate">
        rgrgtgt
        <a href="#toregister" class="to_register">Register</a>
    </div>
    <div align="center" id="register" class="animate">
        cdcdesdw
        <a href="#tologin" class="to_register">Log in </a>
    </div>

CSS

.hiddenanchor {
    display:none;
}
#register{    
    z-index: 21;
}
#login{
    z-index: 22;
}
#toregister:target ~ #register,
#tologin:target ~ #login{
    z-index: 22;
    -webkit-animation-delay: .6s;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-delay: .6s;
    -moz-animation-timing-function: ease-in;
    -o-animation-delay: .6s;
    -o-animation-timing-function: ease-in;
    -ms-animation-delay: .6s;
    -ms-animation-timing-function: ease-in;
    animation-delay: .6s;
    animation-timing-function: ease-in;
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -ms-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}
#toregister:target ~ #login,
#tologin:target ~ #register{
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: scaleOut;
    -moz-animation-name: scaleOut;
    -ms-animation-name: scaleOut;
    -o-animation-name: scaleOut;
    animation-name: scaleOut;
}

/** the actual animation, credit where due : http://daneden.me/animate/ ***/
.animate{
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    
    -moz-animation-duration: 0.5s;
    -moz-animation-fill-mode: both;
    
    -o-animation-duration: 0.5s;
    -o-animation-fill-mode: both;
    
    -ms-animation-duration: 0.5s;
    -ms-animation-fill-mode: both;
    
    animation-duration: 0.5s;
    animation-fill-mode: both;
}