JSFiddle - React, Tailwind, and code Playground

HTML

<body class="preload">
		<div class="popup">
			<h1 class="heartbeat">Lorem.</h1>
			<form>
				<input style="display:none;" type="text" placeholder="Prezývka" id="nick">
				<input type="text" placeholder="Email" id="email">
				<input type="password" placeholder="Heslo" id="password">
				<input style="display: none;" type="password" placeholder="Heslo znova" id="password-repeat">
				<button type="submit">Prihlásiť sa</button>
				<small><a href="#" id="register-link">alebo sa zaregistruj</a></small>
			</form>
		</div>
	</body>

CSS

/* general */
/*.preload *{-webkit-transition:none !important;-moz-transition:none !important;-ms-transition:none !important;-o-transition:none !important;transition:none !important}
*/
html { -webkit-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; }

a{
  color: white;
}

a:active {
    color: red;
}

html{
  height: 100%;
}

body{
  font-family: 'Open Sans', sans-serif;
  background: -webkit-gradient(linear, left top, right top, from(#6a11cb), to(#2575fc));
  background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
  font-size: 1em;
  height: inherit;
}

h1{
  text-align: center;
  vertical-align: top;
  margin-bottom: .9em;
  font-family: Pacifico;
  font-size: 5em;
  background: -webkit-gradient(linear, left top, right bottom, from(#d93589), to(#c72b5a));
  background: linear-gradient(to bottom right, #d93589, #c72b5a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 0;
  cursor: default;
}

form{
  max-width: 19.750em;
  margin: 0 1em 0 1em;
  text-align: center;
}

form input{
  width: 100%;
  height: 100%;
  background:black;
  border: none;
  padding: 1em;
  margin-bottom: 1em;
  color: white;
  border-radius: 0.313em;
  outline: none;
  -webkit-transition: background 0.5s;
  transition: background 0.5s;
}

form input:focus{
  background: rgba(black, 1);
}

form input:last-child{
  margin-bottom: 0;
}

button{
  margin-top: 1em;
  background: -webkit-gradient(linear, left top, right top, from(#ec008c), to(#fc6767));
  background: linear-gradient(to right, #ec008c, #fc6767);
  background-size: 200%;
  background-position: left;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  border-radius: 2.063em;
  padding: 1.250em 2.500em;
  max-width: 100%;
  border: none;
  outline: none;
  cursor: pointer;
  display: block;
  margin: 1em auto;
}

form small a{
  display: block;
  color: black;
}

.popup{
  background: white;
 ...

JavaScript

$("body").removeAttr('class');
var register = $("#register-link");
var button = $("button");
register.click(function(){
	$("#nick").stop(true, false).slideToggle({duration: 350, queue: false});
	$("#password-repeat").stop(true, false).slideToggle({duration: 350, queue: false});
	button.html(button.html() == 'Prihlásiť sa' ? "Registrovať sa" : "Prihlásiť sa");
	register.text(register.text() == "alebo sa zaregistruj" ? "alebo sa prihlás" : "alebo sa zaregistruj");

});