Create User - Copy this React, Tailwind Component to your project

Detailed-Prompt-for-a-Professional,-Fully-Responsive-"Create-New-User"-Web-Page-Design-Page-Layout-and-Features:-Page-Title-and-Description:-Centered-or-top-left-aligned-page-title:-"Create-New-User"-in-bold,-modern-typography.-Include-a-short-description-below-the-title:-"Fill-in-the-required-details-to-add-a-new-user-to-the-system."-Add-an-icon-such-as-MdPersonAdd-next-to-the-title-for-visual-emphasis.-Form-Container:-Card-Styled-Form:-Place-the-form-inside-a-well-designed-card-with-a-subtle-shadow-and-rounded-corners-(bg-white-shadow-lg-rounded-lg-p-6).-Use-a-two-column-layout-for-desktop-and-a-single-column-layout-for-mobile/tablet.-Use-a-linear-gradient-background-(from-blue-500-to-purple-500)-outside-the-card-for-visual-appeal.-Form-Fields:-Field-Design:-Each-input-field-with-a-label-and-placeholder-(e.g.,-"Enter-Name").-Add-React-Icons-for-better-UX:-Name:-MdPersonOutline-Username:-MdAccountCircle-Classy:-MdClass-Division:-MdApps-Roll-No:-MdFormatListNumbered-Password:-MdLockOutline-Field-Validations:-Display-real-time-validation-messages-in-red-or-green-below-each-field.-Example:-"Username-must-be-at-least-5-characters."-Interactive-Input:-Use-an-eye-toggle-icon-(MdVisibility/MdVisibilityOff)-for-the-password-field-to-show/hide-input.-Action-Buttons:-Place-action-buttons-at-the-bottom-of-the-form:-Submit:-Primary-button-styled-with-a-gradient-(from-green-400-to-green-600)-and-an-icon-(MdCheckCircleOutline).-Button-text:-"Create-User".-Reset-Form:-Secondary-button-with-a-subtle-gray-background-and-an-icon-(MdRefresh).-Button-text:-"Reset".-Add-hover-effects-and-subtle-animations-to-buttons.-Additional-Features:-Progress-Bar:-Show-a-step-progress-bar-(using-icons-like-MdStepForward)-at-the-top-of-the-form-to-indicate-progress,-e.g.,-Step-1-of-1.-Tooltips:-Add-tooltips-to-fields-to-explain-their-purpose-(e.g.,-"Roll-No:-Unique-identifier-for-the-student").-Keyboard-Shortcuts:-Use-keyboard-accessibility-for-navigation-between-fields-(Tab/Shift+Tab).-Responsive-Design:-Mobile/Tablet:-Stack-fields-vertically-with-smaller-padding/margins.-Desktop:-Arrange-fields-in-two-columns-with-ample-spacing-between-columns-(grid-cols-2-gap-4).-Use-a-fixed-max-width-for-the-form-container-on-larger-screens-for-optimal-readability.-Confirmation-and-Alerts:-Show-a-confirmation-alert/modal-after-form-submission:-Text:-"User-Created-Successfully!"-Include-icons-like-MdDoneAll-and-buttons-for-"Add-Another-User"-or-"Go-to-User-List".-Use-an-error-toast-(MdErrorOutline)-if-the-form-fails-validation-or-submission.-Accessibility-and-Themes:-Ensure-the-form-is-WCAG-compliant-with-proper-aria-labels-and-focus-states.-Allow-a-dark-mode-toggle-(MdDarkMode/MdLightMode)-for-user-preference.-Breadcrumb-Navigation:-Add-a-breadcrumb-(MdHome-→-MdGroup-→-MdPersonAdd)-at-the-top-to-allow-navigation-back-to-other-pages,-such-as-Home-or-User-List.-Animations-and-Interactions:-Animate-the-card-entrance-with-a-fade-in-and-slide-up-effect.-Add-field-focus-animations-(e.g.,-glow-or-underline-expansion).-Smooth-scroll-to-the-error-field-on-validation-failure.-React-Icons-Suggested:-MdPersonAdd,-MdPersonOutline,-MdAccountCircle,-MdClass,-MdApps,-MdFormatListNumbered,-MdLockOutline,-MdVisibility,-MdVisibilityOff,-MdCheckCircleOutline,-MdRefresh,-MdStepForward,-MdDoneAll,-MdErrorOutline,-MdDarkMode,-MdLightMode,-MdHome,-MdGroup.-This-prompt-ensures-a-highly-professional,-user-friendly,-and-visually-appealing-"Create-New-User"-page-that-is-fully-responsive-across-all-devices