Login-Template-MERN-Calendar

login.css

.login-container{
    margin-top: 15%;
}
.login-form-1{
    border-radius: 5px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
    padding: 5%;
}
.login-form-1 h3{
    text-align: center;
    color: #333;
}
.login-form-2{
    border-radius: 5px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
    padding: 5%;
    background: #0062cc;
}
.login-form-2 h3{
    text-align: center;
    color: #fff;
}
.login-container form{
    padding: 10%;
}
.btnSubmit
{
    width: 50%;
    border-radius: 1rem;
    padding: 1.5%;
    border: none;
    cursor: pointer;
}
.login-form-1 .btnSubmit{
    color: #fff;
    background-color: #0062cc;
}
.login-form-2 .btnSubmit{
    background-color: #fff;
    color: #0062cc;
}
.login-form-2 .ForgetPwd{
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.login-form-1 .ForgetPwd{
    color: #0062cc;
    font-weight: 600;
    text-decoration: none;
}

LoginScreen.js

import React from 'react';
import './login.css';

export const LoginScreen = () => {
    return (
        <div className="container login-container">
            <div className="row">
                <div className="col-md-6 login-form-1">
                    <h3>Ingreso</h3>
                    <form>
                        <div className="form-group mb-2">
                            <input 
                                type="text"
                                className="form-control"
                                placeholder="Correo"
                            />
                        </div>
                        <div className="form-group mb-2">
                            <input
                                type="password"
                                className="form-control"
                                placeholder="Contraseña"
                            />
                        </div>
                        <div className="form-group mb-2">
                            <input 
                                type="submit"
                                className="btnSubmit"
                                value="Login" 
                            />
                        </div>
                    </form>
                </div>

                <div className="col-md-6 login-form-2">
                    <h3>Registro</h3>
                    <form>
                        <div className="form-group mb-2">
                            <input
                                type="text"
                                className="form-control"
                                placeholder="Nombre"
                            />
                        </div>
                        <div className="form-group mb-2">
                            <input
                                type="email"
                                className="form-control"
                                placeholder="Correo"
                            />
                        </div>
                        <div className="form-group mb-2">
                            <input
                                type="password"
                                className="form-control"
                                placeholder="Contraseña" 
                            />
                        </div>

                        <div className="form-group mb-2">
                            <input
                                type="password"
                                className="form-control"
                                placeholder="Repita la contraseña" 
                            />
                        </div>

                        <div className="form-group mb-2">
                            <input 
                                type="submit" 
                                className="btnSubmit" 
                                value="Crear cuenta" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}

Thx Master!

Pura Vida!!!!

Gracias!!

Súper!!

Thanks! Fernando!

Oh gran majestad,gracias por compartir con sus súbditos tan mango código

Excelente Profe...

Grande profe.

👍 🚀 :D

Muchas gracias, excelente curso de react!

Gracias Fernando!!

Gracias Fernando. Bendiciones.

Gracias maestro!!

Estimado, muchas gracias por el curso y por la informacion adicinal.

Super , gracias .

Gracias Profe!!

Gracias prof

Gracias profe!!

Gracias

Gracias :)

Muchas gracias! Saludos desde Argentina!

Gracias profesor, saludos desde República Dominicana.

Graciasss!!!

Excelente aporte Fernando, muchas gracias!!

gracias profe

Gracias Fernando!!

:D gracias profe

SIUUUUUUUUUUUUUUUUU

Hazme un hijo

Bro! muchas gracias!