NHC
Nguyễn Huy Cường

Login Page - Copy this React, Tailwind Component to your project

Prompt: Redesign the Login Page for the BHYT Management System Objective: Redesign the login page of the BHYT Management System to be modern, user friendly, and professional. Details to Include in the Redesign 1. Layout and Structure Create a centered card style login form with a subtle shadow for better depth. Add a two column layout: Left column: Information about the system or a relevant illustration/image. Right column: Login form. 2. Colors and Fonts Use a blue and white color scheme to convey trust and professionalism. Use sans serif fonts like Roboto or Open Sans for better readability. 3. Branding Place the system's logo prominently at the top of the login form. Add the title "Hệ Thống Quản Lý Kê Khai BHYT" with a subtitle: "Giải pháp quản lý kê khai bảo hiểm y tế hiện đại và hiệu quả." Include a footer with: "© 2024 Hệ thống Quản lý Kê khai BHYT. All rights reserved." 4. Form Design Include: Username and Password Fields with placeholders and icons (user and lock). A "Remember Me" toggle (modern switch style design). A "Forgot Password?" link in smaller text below the form. Add hover and focus effects on input fields and buttons. 5. Button Design Use a large, rounded "Đăng nhập" button with: A bold color (blue or green). A hover effect (e.g., slightly lighter shade on hover). 6. Background Use a subtle gradient background or an abstract healthcare/technology related image. Ensure the background doesn't distract from the login form. 7. Responsiveness Make the page fully responsive: Center the login card vertically and horizontally on all screen sizes. Ensure buttons, inputs, and links are touch friendly. Additional Enhancements Add subtle animations: Smooth fade in effect for the login form. Hover effects on buttons and links. Include error messaging for invalid login attempts: E.g., "Invalid username or password" displayed below the form. Deliverables A visually appealing, responsive login page design with a modern and professional aesthetic. Intuitive navigation and form interactivity. Design and deliver a professional and intuitive login page based on these specifications.

Prompt
Component Preview

About

LoginPage - Modern card-style design with user-friendly layout, responsive features, and intuitive forms built with React and Tailwind. Download code free!

Share

Last updated 1 month ago