JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    регистрация / вход    
            <form id="form" method="post" action="#">
              <label>Ваш логин :</label>
              <input class="form_style" type="text" name="name" required oninvalid="this.setCustomValidity('Введите логин!')" oninput="setCustomValidity('')"/><br />
              <label>Ваш пароль :</label>
              <input class="form_style" type="email" name="email" required oninvalid="this.setCustomValidity('Введите пароль!')" oninput="setCustomValidity('')"/><br />
              <label><a href="#">Забыли пароль?</a></label>
              <button class="button">Войти</button>
              <label><a href="#">Зарегистрироваться</a></label>
            </form>
  </li>
</ul>

CSS

li {
  list-style: none;
  display: inline-block;
  position: relative;
  background-color: #ccc;
}
li:hover #form {
  display: block;
}
#form {
  position: absolute;
  display: none;
  transition: all .4s;
  background-color: #ccc;
  width: 200px;
  padding: 1em;
}