JSFiddle - React, Tailwind, and code Playground

by jonsuh

HTML

<section class="registerPage1">
	<section class="registerPage2">
		<form method="post" action="#" onsubmit="" id="regTopfit" name="regTopfit">
			<ul>
				<li>Nombre:</li>
				<li><input type="text" name="nombre" placeholder="Nombre"><input type="text" name="lastname" placeholder="Apellidos"></li>
				<li><input type="email" name="email" placeholder="Dirección de e-mail"></li>
				<li><div id="regMailError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li>Crear contraseña:</li>
				<li><input type="password" name="pass1" placeholder="6-20 caracteres" ></li>
				<li><div id="regPLenError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="password" name="pass2" placeholder="Repite la contraseña" ></li>
				<li><div id="regPMatchError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="checkbox" name="offers" value="Yes">Quiero recibir las últimas novedades de <a href="#">TopFIT</a></li>
				<li><input type="checkbox" name="conditions" value="accepted" >He leído y acepto la <a href="#">política de privacidad</a>.</li>
				<li><div id="regCondError">Debes introducir una dirección de correo electrónico válida.</div></li>
				<li><input type="submit" value="Crea tu cuenta"></li>
			</ul>
		</form>
	</section>
</section>

CSS

/* ---===### REGISTER PAGE ###===--- */
.registerPage1{
	width:100%;
   	height: auto;
}
.registerPage2{
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}
.registerPage1 ul{
	list-style: none;
}
div#regMailError{
	display: none;
	color: red;	
}
div#regPLenError{
	display: none;
	color: red;	
}
div#regPMatchError{
	display: none;
	color: red;	
}
div#regCondError{
	display: none;
	color: red;	
}