Skip to content

README.md

Latest commit

 

History

History
31 lines (22 loc) · 1.48 KB

README.md

File metadata and controls

31 lines (22 loc) · 1.48 KB

Multi-Step Login Form

A modern, responsive multi-step login form designed with TailwindCSS and implemented using HTML, CSS, and JavaScript. This login form is ideal for web applications requiring user authentication, with clean UI and smooth user interactions.

Features

  • Multi-Step Design: Two-step process: email input and password entry.
  • Responsive: Fully responsive layout using TailwindCSS, adapting to all screen sizes.
  • Floating Labels: Interactive labels that animate based on input focus or value presence.
  • Email Validation: Inline email validation with immediate feedback.
  • Stateful Buttons: Buttons change states based on user actions and form validity.
  • User Feedback: Dynamic display of user-entered data in the password step.

File Overview

login.htm

The primary file of the project. Includes the complete structure, styles, and scripts for the login form. Key sections:

  1. HTML Structure: Semantic markup for the form and navigation steps.
  2. CSS Styles: Embedded styles for custom floating label animations and button states.
  3. JavaScript: Functions for validation, step navigation, and real-time feedback.

Requirements

  • TailwindCSS: Loaded via CDN for rapid styling and responsiveness.
  • Modern Browser: Ensure support for HTML5, CSS3, and ES6 JavaScript.

Usage

  1. Clone the repository: 
    git clone https://github.com/chrishultberg/login-form.git