JSFiddle - React, Tailwind, and code Playground

by Gaius Martius

HTML

<div id="reg-auth-title">
  <a class="top-auth">Вход</a> 
  <a href="registration.php">Регистрация</a>
</div>

<div id="block-top-auth">
  <div class="corner"></div>
  <form method="post">
    <h3>Вход</h3>
    <div id="message-auth">Неправильный логин и(или) пароль</div>
    <input type="email" id="auth_login" placeholder="Логин или E-mail">
    <input type="password" id="auth_pass" placeholder="Пароль">

    <span id="button-pass-show-hide" class="pass-show"></span>
    <input type="checkbox" name="rememberme" id="rememberme">
    <label for="rememberme">Запомнить меня</label>

    <a href="#" id="remindpass">Забыли пароль</a>

    <input type="submit" id="button-auth" value="Войти">

    <div class="auth-loading">
      <img src="/images/loading.gif" alt="">
    </div>
  </form>
</div>

CSS

#block-top-auth {
  display: none;
  padding-left: 20px;
}
input[type="email"],
input[type="password"],
#button-auth,
#remindpass {
  display: block;
  margin: 20px 0;
}

JavaScript

$(document).ready(function(){
    $('.top-auth').click( function(){
           $(".top-auth").toggleClass("active-button");
           $("#block-top-auth").fadeToggle(1000);
      });
 });