added tailwind design classes, and installed tailwindcss properly.

frontend/src/components/ChangeAPI.tsx

@@ -9,11 +9,15 @@ function ChangeAPI({ currentAPIKey }: Props) {
   const [apiKey, setApiKey] = useState(currentAPIKey);
 
   return (
-    <div>
-      <h2>Change API Key</h2>
-      <p>Update your API key to fetch weather data.</p>
-      <form>
-        <label htmlFor="apiKey">API Key:</label>
+    <div className="w-full">
+      <h2 className="text-2xl font-bold mb-2 text-blue-700">Change API Key</h2>
+      <p className="mb-6 text-gray-600">
+        Update your API key to fetch weather data.
+      </p>
+      <form className="flex flex-col gap-4">
+        <label htmlFor="apiKey" className="font-medium text-gray-700">
+          API Key:
+        </label>
         <input
           type="text"
           id="apiKey"
@@ -22,8 +26,13 @@ function ChangeAPI({ currentAPIKey }: Props) {
           value={apiKey}
           onChange={(e) => setApiKey(e.target.value)}
           required
+          className="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400"
         />
-        <button type="button" onClick={() => changeAPIcookie(apiKey)}>
+        <button
+          type="button"
+          className="bg-blue-600 text-white font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-700 transition"
+          onClick={() => changeAPIcookie(apiKey)}
+        >
           Update API Key
         </button>
       </form>