added more design using tailwind classes

frontend/src/components/WeatherForm.tsx

@@ -46,11 +46,26 @@ const WeatherCard: React.FC = () => {
   }, []);
 
   return (
-    <>
-      <h2>Weather Card</h2>
-      <p>Current Weather will be displayed here</p>
-      <form onSubmit={handleSubmit}>
-        <label htmlFor="city">Enter City:</label>
+    <div className="w-full max-w-lg mx-auto bg-white/80 rounded-2xl shadow-xl p-8 mt-8">
+      <h2 className="text-3xl font-bold mb-4 text-blue-700 flex items-center gap-2">
+        <svg
+          className="w-8 h-8 text-blue-400"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+        >
+          <path d="M3 12a9 9 0 0118 0A9 9 0 013 12z" />
+        </svg>
+        Weather Card
+      </h2>
+      <p className="mb-2 text-gray-600">
+        Current weather will be displayed here.
+      </p>
+      <form onSubmit={handleSubmit} className="flex flex-col gap-4 mt-4">
+        <label htmlFor="city" className="font-medium text-gray-700">
+          Enter City:
+        </label>
         <input
           type="text"
           id="city"
@@ -59,11 +74,17 @@ const WeatherCard: React.FC = () => {
           value={city}
           placeholder="City Name"
           required
+          className="border border-blue-300 rounded-xl px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono"
         />
-        <button type="submit">Get Weather</button>
+        <button
+          type="submit"
+          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
+        >
+          Get Weather
+        </button>
       </form>
       {weatherData && <WeatherData />}
-    </>
+    </div>
   );
 };