added tailwind css to create account form.

package.json

@@ -36,7 +36,7 @@
 		"lint-staged": "^15.2.8",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
-		"tailwindcss": "^3.4.13",
+		"tailwindcss": "^3.4.14",
 		"vite": "^5.3.5",
 		"vite-plugin-pwa": "^0.20.1",
 		"vite-plugin-svgr": "^4.2.0",

src/components/CreateAccount.jsx

@@ -44,37 +44,67 @@ export function CreateAccount() {
 	};
 
 	return (
-		<div>
-			<h2>Create Account</h2>
-			<form onSubmit={handleSubmit}>
-				<div>
-					<label htmlFor="name">Name:</label>
-					<input
-						type="text"
-						id="name"
-						value={name}
-						onChange={(e) => setName(e.target.value)}
-					/>
-				</div>
-				<div>
-					<label htmlFor="email">Email:</label>
-					<input
-						type="email"
-						value={email}
-						onChange={(e) => setEmail(e.target.value)}
-					/>
-				</div>
-				<div>
-					<label htmlFor="password">Password:</label>
-					<input
-						type="password"
-						value={password}
-						onChange={(e) => setPassword(e.target.value)}
-					/>
-				</div>
-				<button type="submit">Create Account</button>
-				{error && <p>{error}</p>}
-			</form>
+		<div className="flex items-center justify-center min-h-screen bg-gray-100">
+			<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
+				<h2 className="text-2xl font-bold mb-6 text-center">Create Account</h2>
+				<form onSubmit={handleSubmit}>
+					<div className="mb-4">
+						<label
+							htmlFor="name"
+							className="block text-sm font-medium text-gray-700"
+						>
+							Name:
+						</label>
+						<input
+							type="text"
+							id="name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							className="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-accent"
+							required
+						/>
+					</div>
+					<div className="mb-4">
+						<label
+							htmlFor="email"
+							className="block text-sm font-medium text-gray-700"
+						>
+							Email:
+						</label>
+						<input
+							type="email"
+							id="email"
+							value={email}
+							onChange={(e) => setEmail(e.target.value)}
+							className="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-accent"
+							required
+						/>
+					</div>
+					<div className="mb-4">
+						<label
+							htmlFor="password"
+							className="block text-sm font-medium text-gray-700"
+						>
+							Password:
+						</label>
+						<input
+							type="password"
+							id="password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							className="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-accent"
+							required
+						/>
+					</div>
+					<button
+						type="submit"
+						className="w-full bg-accent text-white py-2 rounded-md hover:bg-accent-dark transition"
+					>
+						Create Account
+					</button>
+					{error && <p className="text-red-500 text-sm mt-2">{error}</p>}
+				</form>
+			</div>
 		</div>
 	);
 }