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

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

Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

3 months ago

164
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
Ari Mustofa

9 months ago

2.1k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Author:
Akram Khan

11 months ago

1.5k
Simple Login Form
Login Form Responsive Component

Author:
Ahita Bisma Adlula

4 months ago

864
Simple Sign-up Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

10.2k
Login with social media buttons

Author:
TailwindFlex

2 years ago

13k
Login form
responsive login page design

Author:
Aman kumar

1 year ago

3.9k
Login form with blured background image

Author:
Noah Schmidt

2 years ago

14.6k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

1 year ago

7.9k
Loginform
Animated Login Form with Google Sign-In (Tailwind CSS)

Author:
ishimwe prince

1 month ago

189
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

1 year ago

2.7k
Modern Sign Up Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
AyDin VM

1 year ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components