ZZ
Zaki Zakaria

Change Password Form - Copy this React, Tailwind Component to your project

Design-a-clean-and-professional-change-password-form-card-with-the-following-specifications:-Card-Design:-A-sleek,-modern-card-layout-with-rounded-corners-and-subtle-shadow-effects.-The-background-should-have-a-light-gradient-or-a-soft-color,-ensuring-a-contrast-between-the-card-and-the-background.-Form-Elements:-User-Type-Dropdown:-A-dropdown-menu-at-the-top-labeled-"Select-User-Type"-with-options-like-"Admin,"-"User,"-etc.-First-Name-and-Last-Name-Fields:-Two-text-input-fields-side-by-side-for-"First-Name"-and-"Last-Name."-Email-Field:-A-single-input-field-labeled-"Email."-Password-Field:-A-password-input-field-labeled-"Password."-Confirm-Password-Field:-Another-password-input-field-labeled-"Confirm-Password"-to-ensure-security.-Buttons:-Two-buttons-at-the-bottom:-Submit:-Styled-in-a-primary-color-with-hover-effects-(e.g.,-blue).-Reset:-Styled-in-a-secondary-color-with-hover-effects-(e.g.,-gray).-Design-Details:-Use-a-modern-font-with-appropriate-spacing-and-alignment.-Add-small-icons-inside-the-input-fields-(like-a-user-icon-for-names,-email-icon-for-email,-and-lock-icon-for-passwords).-Add-hover-and-focus-effects-on-all-input-fields-and-buttons-for-a-more-interactive-feel.-Keep-padding,-margin,-and-spacing-consistent-for-a-clean-look.-Responsive-Design:-Ensure-the-card-looks-great-on-both-desktop-and-mobile-devices.-On-smaller-screens,-the-two-side-by-side-fields-(First-Name-and-Last-Name)-should-stack-vertically.-Header:-Add-a-header-to-the-card-that-says-"Change-Password",-styled-prominently.-Footer-(Optional):-A-small-text-link-at-the-bottom,-saying-"Need-help?-Contact-Support"-in-a-muted-font.

Prompt
Component Preview

About

ChangePasswordForm - A sleek card with user-type dropdown, name fields, email, password inputs, and buttons. Built with React and Tail. View and copy code!

Share

Last updated 1 month ago