Login form dinámico HTML y CSS

<form action="#" method="post" class="login-form">

    <div class="form-title">Iniciar sesión</div>

    <input type="text" placeholder="Usuario" name="username" required />

    <input type="password" placeholder="Contraseña" name="password" required />

    <input type="submit" value="Ingresar" />

    <div class="form-message">Si aún no tienes una cuenta, <a href="#">Regístrate aquí</a>.</div>

 </form>

 

 <style>

 .login-form {

  max-width: 300px;

  margin: 0 auto;

  padding: 20px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f2f2f2;

}



.login-form input[type="text"], 

.login-form input[type="password"] {

  width: 100%;

  padding: 10px;

  margin: 5px 0;

  border: 1px solid #ccc;

  border-radius: 3px;

  box-sizing: border-box;

}



.login-form input[type="submit"] {

  width: 100%;

  background-color: #4CAF50;

  color: white;

  border: none;

  padding: 10px;

  border-radius: 3px;

  cursor: pointer;

}



.login-form input[type="submit"]:hover {

  background-color: #45a049;

}



.login-form .form-title {

  text-align: center;

  font-size: 24px;

  margin-bottom: 10px;

}



.login-form .form-message {

  text-align: center;

  margin-top: 10px;

  color: red;

}

</style>