From aa1c6ac6715d6b607de13ca89580aae7276dc862 Mon Sep 17 00:00:00 2001
From: Rana Zaeem <149497053+RanaZaeem0@users.noreply.github.com>
Date: Sat, 22 Jun 2024 08:34:18 -0700
Subject: [PATCH 1/3] Update ButtonGroup.tsx

Signed-off-by: Rana Zaeem  <149497053+RanaZaeem0@users.noreply.github.com>
---
 src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx b/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx
index e593c7cae6..8a136fd4c6 100644
--- a/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx
+++ b/src/plays/multiplayer-tic-tac-toe/components/ButtonGroup.tsx
@@ -11,14 +11,14 @@ export default function ButtonGroup({ setIsCross }: ButtonGroupProps) {
     <>
       <section className="flex justify-center">
         <button
-          className="flex justify-center items-center w-28 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
+          className="grid justify-center items-center w-24 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
           onClick={() => setIsCross(true)}
         >
           <span className="hidden">Cross</span>
           <FaTimes className="text-2xl font-extrabold text-red-500" />
         </button>
         <button
-          className="flex justify-center items-center w-28 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
+          className="grid justify-center items-center w-24 h-16 m-3 cursor-pointer border rounded-lg bg-[#00f2fe] hover:border-black"
           onClick={() => setIsCross(false)}
         >
           <span className="hidden">Circle</span>

From 2e4fc8315b7ad2ace9129de01d850f6c8e71576f Mon Sep 17 00:00:00 2001
From: Rana Zaeem <149497053+RanaZaeem0@users.noreply.github.com>
Date: Sat, 22 Jun 2024 08:35:01 -0700
Subject: [PATCH 2/3] Update GameGrid.tsx

Signed-off-by: Rana Zaeem  <149497053+RanaZaeem0@users.noreply.github.com>
---
 src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx b/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx
index 5aad077bd5..a97fc459a6 100644
--- a/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx
+++ b/src/plays/multiplayer-tic-tac-toe/components/GameGrid.tsx
@@ -12,7 +12,7 @@ export default function GameGrid({ changeItem }: GameGrid) {
       <div className="grid grid-cols-3 gap-4">
         {GAME_ARRAY.map((ele, i) => (
           <div
-            className="md:w-24 md:h-24 w-32 flex justify-center items-center h-32 bg-[#00f2f2] border-2 border-black rounded-lg cursor-pointer"
+            className="md:h-16  sm:w-44 w-20  gird justify-center items-center h-12  bg-[#00f2f2] border-2 border-black rounded-lg cursor-pointer"
             key={i}
             onClick={() => changeItem(i)}
           >

From 98f17e811a461dd1786ef639ba05e726b022e621 Mon Sep 17 00:00:00 2001
From: Rana Zaeem <149497053+RanaZaeem0@users.noreply.github.com>
Date: Sat, 22 Jun 2024 08:36:17 -0700
Subject: [PATCH 3/3] Update MultiplayerTicTacToe.tsx

Signed-off-by: Rana Zaeem  <149497053+RanaZaeem0@users.noreply.github.com>
---
 src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx b/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx
index 3a45d978f3..e791bc2a1d 100644
--- a/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx
+++ b/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx
@@ -86,13 +86,13 @@ function MultiplayerTicTacToe(props: any) {
     <>
       <div className="play-details">
         <PlayHeader play={props} />
-        <div className="flex justify-center play-details-body">
+        <div className="grid items-center justify-center play-details-body">
           {/* Your Code Starts Here */}
           <div>
             <h1 className="text-2xl text-center md:text-3xl">Multiplayer Tic Tac Toe</h1>
             <ButtonGroup setIsCross={setIsCross} />
 
-            <section className="flex items-center justify-center">
+            <section className="flex items-center !justify-center">
               <ToastContainer />
               <main>
                 <div>