Dynamic Auth System - Copy this Html, Tailwind Component to your project
Add-signup-forget-password-Page-dynamically-in-single-page-with-keeping-ui-.-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Chatwave---Login-&-Signup</title>-<link-href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"-rel="stylesheet">-<link-rel="stylesheet"-href="index.css">-</head>-<body-class="min-h-screen-bg-gradient-to-br-from-blue-500-to-purple-600-flex-items-center-justify-center-p-4">-<div-class="bg-white-rounded-2xl-shadow-2xl-w-full-max-w-4xl-flex-flex-col-md:flex-row">-<div-class="w-full-md:w-1/2-p-8">-<div-class="text-center-mb-8">-<h2-class="text-3xl-font-bold-text-blue-600">Chatwave</h2>-<p-class="text-gray-500">Welcome-back!</p>-</div>-<div-id="loginForm"-class="space-y-4">-<div-class="relative">-<input-type="email"-id="email"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Email"-required-pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"-aria-label="Email-address">-<div-class="email-suggestions-hidden-absolute-w-full-bg-white-border-rounded-lg-mt-1-shadow-lg"></div>-</div>-<div-class="relative">-<input-type="password"-id="password"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Password"-required-minlength="8"-aria-label="Password">-<button-class="absolute-right-3-top-3-text-gray-400-hover:text-gray-600"-onclick="togglePassword('password')">-<svg-class="w-6-h-6"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M15-12a3-3-0-11-6-0-3-3-0-016-0z"/>-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M2.458-12C3.732-7.943-7.523-5-12-5c4.478-0-8.268-2.943-9.542-7-1.274-4.057-5.064-7-9.542-7-4.477-0-8.268-2.943-9.542-7z"/>-</svg>-</button>-</div>-<button-class="w-full-bg-blue-600-text-white-py-3-rounded-lg-hover:bg-blue-700-transform-transition-hover:scale-105-focus:outline-none-focus:ring-2-focus:ring-blue-400"-type="submit">Login</button>-<p-class="text-center"><a-href="#"-class="text-blue-600-hover:underline"-onclick="showForgotPassword()">Forgot-Password?</a></p>-</div>-<div-id="signupForm"-class="hidden-space-y-4">-<input-type="text"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Full-Name"-required-aria-label="Full-Name">-<input-type="text"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Username"-required-aria-label="Username">-<input-type="email"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Email"-required-aria-label="Email">-<input-type="tel"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Mobile"-required-aria-label="Mobile">-<textarea-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Bio"-aria-label="Bio"></textarea>-<div-class="relative">-<input-type="password"-id="newPassword"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Password"-required-minlength="8"-aria-label="New-Password">-<button-class="absolute-right-3-top-3-text-gray-400-hover:text-gray-600"-onclick="togglePassword('newPassword')">-<svg-class="w-6-h-6"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M15-12a3-3-0-11-6-0-3-3-0-016-0z"/>-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M2.458-12C3.732-7.943-7.523-5-12-5c4.478-0-8.268-2.943-9.542-7-1.274-4.057-5.064-7-9.542-7-4.477-0-8.268-2.943-9.542-7z"/>-</svg>-</button>-</div>-<button-class="w-full-bg-blue-600-text-white-py-3-rounded-lg-hover:bg-blue-700-transform-transition-hover:scale-105-focus:outline-none-focus:ring-2-focus:ring-blue-400"-type="submit">Sign-Up</button>-</div>-<div-id="forgotPasswordForm"-class="hidden-space-y-4">-<p-class="text-gray-600-text-center">Enter-your-email-address-to-reset-your-password</p>-<input-type="email"-class="w-full-px-4-py-3-border-rounded-lg-focus:outline-none-focus:ring-2-focus:ring-blue-400"-placeholder="Email"-required-aria-label="Reset-Password-Email">-<button-class="w-full-bg-blue-600-text-white-py-3-rounded-lg-hover:bg-blue-700-transform-transition-hover:scale-105-focus:outline-none-focus:ring-2-focus:ring-blue-400"-type="submit">Reset-Password</button>-</div>-</div>-<div-class="w-full-md:w-1/2-bg-blue-600-rounded-r-2xl-p-8-text-white-flex-flex-col-justify-center-items-center">-<h3-class="text-3xl-font-bold-mb-4">New-Here?</h3>-<p-class="text-center-mb-8">Sign-up-and-discover-a-great-amount-of-new-opportunities!</p>-<button-onclick="toggleForms()"-class="border-2-border-white-px-8-py-3-rounded-lg-hover:bg-white-hover:text-blue-600-transform-transition-hover:scale-105-focus:outline-none-focus:ring-2-focus:ring-white">Sign-Up</button>-</div>-</div>-</body>-</html>.-//index.css.-@keyframes-slideIn-{-0%-{-opacity:-0;-transform:-translateY(-20px);-}-100%-{-opacity:-1;-transform:-translateY(0);-}-}-.email-suggestions-{-max-height:-200px;-overflow-y:-auto;-}-.email-suggestions-div-{-padding:-8px-16px;-cursor:-pointer;-}-.email-suggestions-div:hover-{-background-color:-#f3f4f6;-}-.animate-slide-{-animation:-slideIn-0.3s-ease-out;-}-.error-message-{-color:-#dc2626;-font-size:-0.875rem;-margin-top:-0.25rem;-}-.success-message-{-color:-#059669;-font-size:-0.875rem;-margin-top:-0.25rem;-}-@media-(max-width:-768px)-{-.bg-gradient-to-br-{-min-height:-100vh;-}-}-u0_a157@localhost-~/t/chat-ui>
