JSFiddle - React, Tailwind, and code Playground

by Clear

HTML

<div class="login-button">
    Login
</div>

<div class="register-button">
    Registrati
</div>

<div id="login">Form per il login</div>

CSS

.login-button {
    background: yellow;
    height: 30px;
    line-height: 30px;
    width: 100px;
    text-align: center;
}

.register-button {
    background: red;
    height: 30px;
    line-height: 30px;
    width: 100px;
    text-align: center;
}
#login {
    background: #fff;
    border: 1px solid #000;
    height: 50px;
    line-height: 50px;
    width: 200px;
    text-align: center;
    color: #000;
    display: none;
}

JavaScript

$( ".login-button" ).click(function() {
 $( ".login-button , .register-button").fadeOut( "slow", function() {
  $( "#login" ).fadeIn("slow");
 });
});