Login Form - Agendamiento

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

Author Jhonatan Llamuca

Tailwind v3.4 1.9k 8

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 Template
its is a basic login template

Sergio Gonzalez

1 year ago

1.1k
chating
chating all social media

Nirere Esther

1 year ago

832
login page
login page

Tofayel Islam

10 months ago

944
Login Card

Anonymous

2 years ago

3.6k
Luxury Serif Login Form
An elegant editorial-style login form with refined serif typography, warm neutral colors, subtle borders, and a premium boutique aesthetic.

JUGENDRA GANGWAR

1 week ago

6
login form
You can use this login when you want to log in to a specific website such as Facebook, Instagram, etc.

Nishimwe Jeanine

1 year ago

1.2k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

SHARIFUL ISLAM

1 year ago

1.6k
GenzeStack Dumpy - Interactive Login Page with Mascot
A playful, fully responsive Tailwind CSS login component featuring "Dumpy" the GenzeStack mascot with interactive status tabs, custom SVG graphics, and dark mode support.

Sayista Yazdani

2 weeks ago

135
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Rajesh Pandey

1 year ago

1.6k
login
login

Abhishek Kumar

1 year ago

1.1k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.4k
Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

shrenik khule

8 months ago

756