Home
Jhonatan Llamuca
Login Form - Agendamiento

Login Form - Agendamiento

This tailwind example is contributed by Jhonatan Llamuca, on 09-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author Jhonatan Llamuca

1.4k

Fork Fullscreen

<div _ngcontent-ng-c3391652663="" class="grid grid-cols-12 h-screen"><div _ngcontent-ng-c3391652663="" class="col-span-12 md:col-span-6 lg:col-span-5 2xl:col-span-4"><div _ngcontent-ng-c3391652663="" class="w-full h-full flex flex-col justify-center items-center"><router-outlet _ngcontent-ng-c3391652663=""></router-outlet><app-login-page _nghost-ng-c1815958160="" class="ng-star-inserted"><div _ngcontent-ng-c1815958160=""><h2 _ngcontent-ng-c1815958160="" class="font-bold text-4xl mb-2"> FlexNet<span _ngcontent-ng-c1815958160="" class="text-teal-600">Agendamiento</span></h2><span _ngcontent-ng-c1815958160="" class="font-normal hidden">No tienes una cuenta? <a _ngcontent-ng-c1815958160="" class="no-underline text-teal-500 hover:underline" href="/auth/register"> Crear cuenta </a></span><div _ngcontent-ng-c1815958160="" class="py-1.5"></div><div _ngcontent-ng-c1815958160="" class="py-1.5"></div><form _ngcontent-ng-c1815958160="" novalidate="" class="ng-pristine ng-invalid ng-touched"><app-input-text _ngcontent-ng-c1815958160="" type="email" inputname="email" placeholder="Correo electrónico" _nghost-ng-c3815185911="" class="ng-pristine ng-invalid ng-touched"><div _ngcontent-ng-c3815185911="" class="relative ng-pristine ng-invalid ng-touched"><input _ngcontent-ng-c3815185911="" autofocus="" autocomplete="off" class="px-4 py-3 border-none border-gray-50 text-black rounded-full bg-teal-50 w-96 ng-pristine ng-invalid ng-touched" type="email" name="email" placeholder="Correo electrónico"><div _ngcontent-ng-c3815185911="" class="relative text-left"></div></div></app-input-text><div _ngcontent-ng-c1815958160="" class="py-1.5"></div><app-input-password _ngcontent-ng-c1815958160="" inputname="password" _nghost-ng-c40559887="" class="ng-pristine ng-invalid ng-touched"><div _ngcontent-ng-c40559887="" class="relative ng-pristine ng-invalid ng-touched"><input _ngcontent-ng-c40559887="" autocomplete="off" placeholder="Contraseña" class="px-4 py-3 pr-8 border-none rounded-full text-black bg-teal-50 border-2 w-96 ng-untouched ng-pristine ng-invalid" type="password" name="password"><div _ngcontent-ng-c40559887="" class="absolute right-0 top-0 py-3 px-2 cursor-pointer"><i _ngcontent-ng-c40559887="" class="text-black pi pi-eye-slash"></i></div><div _ngcontent-ng-c40559887="" class="relative text-left"></div></div></app-input-password><br _ngcontent-ng-c1815958160=""><br _ngcontent-ng-c1815958160=""><app-button _ngcontent-ng-c1815958160="" type="submit" title="Iniciar sesión" _nghost-ng-c819204943=""><button _ngcontent-ng-c819204943="" pbutton="" class="p-element border-none cursor-pointer text-[1rem] shadow py-4 px-20 rounded-full bg-teal-500 hover:bg-teal-600 text-white p-button p-component" type="submit"><span class="p-button-label">Iniciar sesión</span></button></app-button></form><br _ngcontent-ng-c1815958160=""><br _ngcontent-ng-c1815958160=""><a _ngcontent-ng-c1815958160="" class="no-underline text-teal-500 hover:underline" href="/auth/recovery-password">¿Has olvidado la contraseña?</a><br _ngcontent-ng-c1815958160=""><br _ngcontent-ng-c1815958160=""></div></app-login-page></div></div><div _ngcontent-ng-c3391652663="" class="col-span-12 md:col-span-6 lg:col-span-7 2xl:col-span-8"><div _ngcontent-ng-c3391652663="" class="w-full flex flex-col items-center justify-center text-center h-full bg-teal-500 text-white p-14"><h3 _ngcontent-ng-c3391652663="" class="text-4xl my-2 text-white"><b _ngcontent-ng-c3391652663="">CONTACT CENTER</b></h3><h5 _ngcontent-ng-c3391652663="" class="text-3xl my-2 text-white"><b _ngcontent-ng-c3391652663="">Gestión efectiva</b></h5><img _ngcontent-ng-c3391652663="" src="../../../assets/imgs/logo_gestion.png" alt=""></div></div></div>

Related Examples