Update components/MathQuizApp.tsx

components/MathQuizApp.tsx

@@ -63,62 +63,64 @@ const MathQuizApp = () => {
   };
 
   return (
-    <div className="max-w-3xl mx-auto p-8 bg-white rounded-lg shadow-md">
-      <h1 className="text-4xl font-bold mb-8 text-center">Math Quiz App</h1>
-      <form onSubmit={handleSubmit} className="space-y-6">
-        <div className="flex flex-col items-center gap-6">
-          <div className="flex gap-8 items-center justify-center">
-            <div className="text-xl font-bold">Correct: {score}</div>
-            <div className="text-xl font-bold text-red-500">Wrong: {wrongAnswers}</div>
+    <div className="bg-gray-50 min-h-screen flex items-center justify-center">
+      <div className="max-w-3xl mx-auto p-8 bg-white rounded-lg shadow-md mt-4">
+        <h1 className="text-4xl font-bold mb-8 text-center">Math Quiz App</h1>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="flex flex-col items-center gap-6">
+            <div className="flex gap-8 items-center justify-center">
+              <div className="text-xl font-bold">Correct: {score}</div>
+              <div className="text-xl font-bold text-red-500">Wrong: {wrongAnswers}</div>
+            </div>
+            <select
+              value={difficulty}
+              onChange={handleDifficultyChange}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 w-48 text-center"
+            >
+              {difficulties.map((difficulty) => (
+                <option key={difficulty} value={difficulty}>
+                  {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
+                </option>
+              ))}
+            </select>
           </div>
-          <select
-            value={difficulty}
-            onChange={handleDifficultyChange}
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-lg rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2.5 w-48 text-center"
-          >
-            {difficulties.map((difficulty) => (
-              <option key={difficulty} value={difficulty}>
-                {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div className="text-center mt-8">
-          <p className="text-3xl font-bold mb-6">
-            What is {question.num1} {question.operation} {question.num2}?
-          </p>
-          <input
-            type="number"
-            value={userAnswer}
-            onChange={(e) => setUserAnswer(e.target.value)}
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 p-4 w-64 text-center"
-          />
-        </div>
-        <div className="text-center">
-          <button
-            type="submit"
-            className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-lg px-8 py-3 text-center"
-          >
-            Submit
-          </button>
-        </div>
-        {result && (
-          <p
-            className={`text-xl font-bold text-center ${
-              result === 'Correct!' ? 'text-green-500' : 'text-red-500'
-            }`}
-          >
-            {result}{' '}
-            {result === 'Correct!' ? (
-              <Check className="inline-block w-6 h-6" />
-            ) : (
-              <X className="inline-block w-6 h-6" />
-            )}
-          </p>
-        )}
-      </form>
+          <div className="text-center mt-8">
+            <p className="text-3xl font-bold mb-6">
+              What is {question.num1} {question.operation} {question.num2}?
+            </p>
+            <input
+              type="number"
+              value={userAnswer}
+              onChange={(e) => setUserAnswer(e.target.value)}
+              className="bg-gray-50 border border-gray-300 text-gray-900 text-xl rounded-lg focus:ring-blue-500 focus:border-blue-500 p-4 w-64 text-center"
+            />
+          </div>
+          <div className="text-center">
+            <button
+              type="submit"
+              className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-lg px-8 py-3 text-center"
+            >
+              Submit
+            </button>
+          </div>
+          {result && (
+            <p
+              className={`text-xl font-bold text-center ${
+                result === 'Correct!' ? 'text-green-500' : 'text-red-500'
+              }`}
+            >
+              {result}{' '}
+              {result === 'Correct!' ? (
+                <Check className="inline-block w-6 h-6" />
+              ) : (
+                <X className="inline-block w-6 h-6" />
+              )}
+            </p>
+          )}
+        </form>
+      </div>
     </div>
   );
 };
 
-export default MathQuizApp;
+export default MathQuizApp;