added tailwind design classes, and installed tailwindcss properly.

frontend/src/components/Header.tsx

@@ -9,11 +9,31 @@ const Header: React.FC = () => {
 
   return (
     <>
-      <header>
-        <h1>Weather App</h1>
-        <button onClick={() => setApiCard(true)}>Set API Key</button>
+      <header className="bg-blue-600 text-white shadow-md py-6 px-4 flex items-center justify-between">
+        <h1 className="text-3xl font-bold tracking-wide drop-shadow">
+          Weather App
+        </h1>
+        <button
+          className="bg-white text-blue-600 font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-100 transition"
+          onClick={() => setApiCard(true)}
+        >
+          Set API Key
+        </button>
       </header>
-      {apiCard && <ChangeAPI currentAPIKey={apiKey} />}
+      {apiCard && (
+        <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
+            <button
+              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-xl"
+              onClick={() => setApiCard(false)}
+              aria-label="Close"
+            >
+              &times;
+            </button>
+            <ChangeAPI currentAPIKey={apiKey} />
+          </div>
+        </div>
+      )}
     </>
   );
 };