Use tailwind css instead

crestcere · Apr 7, 2023 · 746e9be · 746e9be
1 parent 904becf
commit 746e9be
Show file tree

Hide file tree

Showing 7 changed files with 1,788 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -5,36 +5,41 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Tic-Tac-Toe</title>
-    <link rel="stylesheet" href="style.css">
+    <link href="./output.css" rel="stylesheet">
     <script src="js.js" defer></script>
 </head>
-<body>
+<body class="flex justify-center space-y-10 justify-center items-center flex-col h-screen">
     <form>
-        <label for="player1">Player 1 Name:</label>
-        <input type="text" id="player1" name="player1" placeholder="Please enter player 1 name"><br>
-        <label for="player2">Player 2 Name:</label>
-        <input type="text" id="player2" name="player2" placeholder="Please enter player 2 name"><br>
-        <input type="submit" class="savebutton" value="Save">
-        <button type="button">Reset</button>
+        <label class="border-2 border-amber-100" for="player1">Player 1 Name:</label>
+        <input class="border-2 border-solid bg-amber-50" type="text" id="player1" name="player1" placeholder="Please enter player 1 name"><br>
+        <label class="border-2 border-amber-100" for="player2">Player 2 Name:</label>
+        <input class="border-2 border-solid bg-amber-50" type="text" id="player2" name="player2" placeholder="Please enter player 2 name"><br>
+        <input class="border-2 border-solid bg-slate-300 border-red-400 rounded-lg w-20 savebutton" type="submit" value="Save">
+        <button class="border-2 border-solid bg-slate-300 border-red-400 rounded-lg w-20 " type="button">Reset</button>
     </form>
-    <table>
-        <tr>
-            <th>Player</th>
-            <th>Score</th>
-        </tr>
-        <tr>
-            <td class="p1-name">Player 1</td>
-            <td class="p1-score">P1 Score</td>
-        </tr>
-        <tr>
-            <td class="p2-name">Player 2</td>
-            <td class="p2-score">P2 Score</td>
-        </tr>
+    <table class="table-fixed border border-indigo-600 w-1/5">
+        <thead>
+            <tr class="border-b border-indigo-600">
+                <th class="border-r border-indigo-600">Player</th>
+                <th>Score</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr class="border-b border-indigo-600">
+                <td class="p1-name border-r border-indigo-600">Player 1</td>
+                <td class="p1-score">P1 Score</td>
+            </tr>
+            <tr>
+                <td class="p2-name border-r border-indigo-600">Player 2</td>
+                <td class="p2-score">P2 Score</td>
+            </tr>
+        </tbody>
     </table>
-    <div class="body">BODY</div>
-    <div class="board-buttons">
-        <button class="reset-board">Reset Board</button>
-        <button class="reset-score">Reset Score</button>
+    <div class="">
+        <div class="body">BODY</div>
+        <button class="reset-board border-2 bg-slate-300 border-solid border-cyan-800 rounded-lg hover:border-dotted">Reset Board</button>
+        <button class="reset-score border-2 bg-slate-300 border-solid border-cyan-800 rounded-lg hover:border-dotted">Reset Score</button>
     </div>
+
 </body>
 </html>
diff --git a/input.css b/input.css
@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*table, tr, td, th {*/
+/*    border: solid 1px black;*/
+/*    border-collapse: collapse;*/
+/*}*/