dividida la pagina de login en componentes reutilizables

import { LoginForm } from './LoginForm';

export function LoginContainer() {

    return (

        <div className="min-h-screen bg-white relative flex">

            <div className="relative sta flex min-h-screen flex-col justify-center loginBackground">

                <div

                    className="bg-white px-6 pt-10 pb-8 shadow-black sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10 shadow-2xl m-2 sm:absolute sm:left-1/4"

                    style={{

                        borderRadius: "60px",

                        position: window.innerWidth >= 640 ? "absolute" : "relative",

                        left: window.innerWidth >= 640 ? "25%" : "0",

                        top: window.innerWidth >= 640 ? "50%" : "auto",

                        transform: window.innerWidth >= 640 ? "translateY(-50%)" : "none",

                    }}

                >

                    <div className="sm:mx-auto sm:w-full sm:max-w-sm">

                        <img

                            className="mx-auto h-10 w-auto"

                            src="/src/assets/img/LogosGobierno.png"

                            alt="company"

                        />

                        <h1

                            className="mt-10 text-center font-semibold"

                            style={{ fontSize: "30px", color: "#781005" }}

                        >

                            INICIAR SESIÓN

                        </h1>

                    </div>

                    <LoginForm />

                </div>

            </div>

        </div>

    );

}