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

539

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

Simple Login Form
Login Form Responsive Component

Author:
Ahita Bisma Adlula

2 months ago

498
Modern and Fully Responsive Login Form with Social Media Authentication and Floating Label Inputs
This sleek, fully responsive login form is designed with usability and aesthetics in mind. It features a clean, minimalistic design with smooth transitions and modern UI elements. The form includes: Email and Password Inputs: Both fields feature floating labels that animate seamlessly when focused or filled, ensuring a visually appealing user experience. Input validation is built-in, and placeholders are hidden for a clean look. Social Media Login Buttons: Integrated Google and Facebook sign-in buttons, allowing users to authenticate easily using their social media accounts. These buttons are styled to match the platform’s branding and include an intuitive hover effect to enhance interactivity. “Forgot Password?” & “Remember Me” Options: The form allows users to easily reset their password or opt to remain logged in. These options are aligned neatly, and the labels are clear and concise for accessibility. Custom Styling: Built with Tailwind CSS, ensuring a responsive, mobile-first design that adapts seamlessly to any screen size. The form's design utilizes smooth hover effects, rounded corners, subtle shadow effects, and modern color schemes for an enhanced visual appeal. Easy Integration: This component can be easily integrated into any web application. Whether you're building a dashboard, a website, or a SaaS product, this login form is a perfect fit for any modern application that needs secure user authentication. Features: Fully responsive: Looks great on mobile, tablet, and desktop. Floating labels: Clear input fields with animated labels that enhance the user interface. Social Media Integration: Includes Google and Facebook login options for quick authentication. Password Reset: A "Forgot Password?" link allows for easy password recovery. Remember Me: A checkbox for staying logged in. Customizable Design: Built using Tailwind CSS, easy to adapt to match any branding. Smooth Interactivity: Subtle hover effects and animations for a modern user experience. This login form not only provides the essential features needed for user authentication but also elevates the user experience with its modern design and smooth animations.

Author:
Jay Dee

3 months ago

293
Full page login page

Author:
Anonymous

5 months ago

1.2k
Quick Signup Form

Author:
Paul Intay

1 year ago

2k
Tailwind login form with image
basic form design useful for rapid prototyping.

Author:
Abigail

2 years ago

11.8k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

9 months ago

1.1k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

1.6k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

4 days ago

18
Registration Form

Author:
Maxim

3 weeks ago

94
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

5 months ago

1.3k
Login form

Author:
Rajesh Maheshwari

1 month ago

367
Auth Page with TailwindCSS and AlpineJS

Author:
ᴀʀ!ᴀ

4 days ago

27

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components