Add prose, adjust body scaling/spacing

package.json

@@ -27,6 +27,7 @@
     "zod": "^3.18.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.8",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",

src/pages/index.tsx

@@ -10,24 +10,31 @@ const Home: NextPage = () => {
                 <title>100prisoners.com</title>
                 <link rel="icon" href="/favicon.ico"/>
             </Head>
-            <main className="flex min-h-screen flex-col items-center bg-white">
-                <div className="mt-8 px-3 max-w-[50rem] w-[80%] space-y-3">
-                    <h1 className="text-4xl mb-2">100Prisoners.com</h1>
-                    <div>
-                        This website is dedicated to exploring the intriguing 100 prisoners problem, a mathematical
+            <main className="flex w-full flex-col items-center bg-white">
+                <div className="mt-8 px-3 max-w-screen-md w-[90%]">
+                    <h1 className="text-3xl sm:text-5xl mb-2">100Prisoners.com</h1>
+                    <div className="prose lg:prose-xl">
+                        <p>
+                            This website is dedicated to exploring the intriguing 100 prisoners problem, a mathematical
                         challenge that seems astronomically impossible at first, yet can leverage mathematics to raise
                         the chances one hundred octillion.
                         <br/>
                         <br/>
                         This thought experiment presents a scenario in which a group of 100 prisoners are tasked with
                         finding their own numbered slip among a collection of 100 boxes, each containing a random
-                        permutation of the numbers 1 through 100. The prisoners are allowed to open 50 boxes each in an
+                        permutation of the numbers 1 through 100.
+                        </p>
+                        <p>
+                            The prisoners are allowed to open 50 boxes each in an
                         attempt to find their own number, and all of the prisoners must be successful in order to be set
                         free. This problem raises questions about strategy and probability in search of a solution.
                     </div>
-                    <NoSSR>
-                        <BoxTable/>
-                    </NoSSR>
+                    <div className="pt-5">
+
+                        <NoSSR>
+                            <BoxTable/>
+                        </NoSSR>
+                    </div>
                 </div>
             </main>
         </>

tailwind.config.cjs

@@ -8,5 +8,7 @@ module.exports = {
             }
         },
     },
-    plugins: [],
+    plugins: [
+        require('@tailwindcss/typography')
+    ],
 };

yarn.lock

@@ -161,6 +161,16 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tailwindcss/typography@^0.5.8":
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.8.tgz#8fb31db5ab0590be6dfa062b1535ac86ad9d12bf"
+  integrity sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@tanstack/query-core@4.20.4":
   version "4.20.4"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.20.4.tgz#1f7975a2db26a8bc2f382bad8a44cd422c846b17"
@@ -1477,6 +1487,16 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -1773,6 +1793,14 @@ postcss-nested@6.0.0:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.10:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"