JSFiddle - React, Tailwind, and code Playground

HTML

<div id="enter">
  <input type="checkbox" id="login">
  <div class="enter">
    <label for="login">войти</label>
  </div>
  <div class="login">
    Логин
    <input type="text" name="login">
    Пароль
    <input type="password" name="password">
    <label for="login">отмена</label>
  </div>
</div>

CSS

.enter,.login{
  position:absolute;
  width:100%;
  height:100%;
}
.login{
  opacity:0;
  z-index:0;
  transition:all 1s ease-out 0.0s;
}
.enter{
  line-height:100px;
  text-align:center;
  opacity:1;
  z-index:1;
  transition:all 1s ease-out 0.0s;
}
.enter label{
  display:inline-block;
}
.login input{
  width:100%;
  box-sizing:border-box;
}
#enter{
  position:relative;
  width:100px;
  height:100px;
  border:1px solid #bbb;
}
#login{
  margin:0;
  padding:0;
  border:0;
  width:0;
  height:0;
  position:absolute;
}
#login:checked~.enter{
  opacity:0;
  z-index:0;
  transform:rotate(1turn);
  transition:all 1s ease-out 0.0s;
}
#login:checked~.login{
  opacity:1;
  z-index:1;
  transform:rotate(1turn);
  transition:all 1s ease-out 0.0s;
}