Disaster Guard Registration Form - Copy this Html, Tailwind Component to your project

For-the-DisasterGuard-registration-page,-you-should-start-with-an-attractive-and-unique-background-that-transitions-from-deep-red-to-teal-and-yellow-hues.-This-color-gradient-will-evoke-a-sense-of-urgency-and-alertness-while-maintaining-a-feeling-of-safety.-The-page-layout-should-feature-a-centered-card-style-form,-which-is-sleek-and-modern-with-rounded-corners-and-a-subtle-drop-shadow-to-create-depth.-Utilize-Tailwind-CSS-classes-like-rounded-xl,-shadow-xl,-and-bg-gradient-to-bl-for-the-card-to-give-it-a-clean,-polished-appearance,-with-plenty-of-padding-(p-8)-and-spacing-(space-y-6).-The-form-fields-should-be-neatly-arranged,-with-the-Full-Name-field-consisting-of-two-inputs-(First-Name-and-Last-Name)-displayed-side-by-side-on-larger-screens-using-the-sm:flex-row-class,-and-stacked-on-smaller-screens-with-sm:flex-col.-Other-fields-such-as-Username,-Phone-Number,-Email,-Password,-and-Confirm-Password-should-span-the-full-width-of-the-form-with-the-w-full-class-and-be-styled-with-input,-input-bordered,-and-rounded-lg-to-ensure-consistency-and-readability.-Focus-effects-should-be-applied-using-focus:outline-none-and-focus:ring-2-for-a-modern,-interactive-feel.-For-the-submit-button,-use-a-gradient-background-that-transitions-from-teal-to-red,-achieved-with-the-bg-gradient-to-tr-from-teal-500-to-red-500-class.-The-button-should-have-hover-effects-that-slightly-scale-up-(hover:scale-105),-along-with-a-transition-effect-(transition-all)-for-smooth-animation.-Shadow-effects-(shadow-md-hover:shadow-lg)-will-add-depth,-making-the-button-stand-out-visually.-The-page-title,-"DisasterGuard-Registration,"-should-have-a-pulse-animation-to-grab-attention,-with-the-text-styled-in-a-gradient-using-the-bg-gradient-to-tr-and-bg-clip-text-classes-to-make-it-bold-and-vibrant.-Typography-for-the-body-text-should-be-clear-and-legible,-using-text-center-for-alignment-and-text-gray-600-for-readability.-The-link-for-users-to-log-in-should-be-styled-in-teal-(text-teal-600)-and-highlighted-when-hovered-(hover:underline),-ensuring-it’s-both-interactive-and-easy-to-find.-To-ensure-a-responsive-design,-the-form-layout-should-adapt-to-various-screen-sizes-using-Tailwind's-responsive-utilities.-For-example,-on-smaller-screens,-the-form-fields-should-stack-vertically,-while-on-larger-screens,-inputs-like-Full-Name-should-align-horizontally-with-sm:space-x-4.-Additional-responsiveness-should-be-incorporated-by-using-sm:space-y-4-to-ensure-proper-vertical-spacing-on-smaller-screens.-Finally,-feel-free-to-enhance-the-design-further-with-custom-styles-for-personal-touches,-such-as-applying-the-bg-clip-text-for-gradient-text-or-using-custom-borders-for-sharper-edges.-This-approach-will-result-in-a-dynamic,-user-friendly,-and-visually-appealing-registration-page-that-communicates-both-urgency-and-safety-for-your-DisasterGuard-platform.