style 404 page

src/pages/404.js

@@ -1,51 +1,22 @@
 import * as React from "react";
 import { Link } from "gatsby";
 
-// styles
-const pageStyles = {
-  color: "#232129",
-  padding: "96px",
-  fontFamily: "-apple-system, Roboto, sans-serif, serif",
-};
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-};
-
-const paragraphStyles = {
-  marginBottom: 48,
-};
-const codeStyles = {
-  color: "#8A6534",
-  padding: 4,
-  backgroundColor: "#FFF4DB",
-  fontSize: "1.25rem",
-  borderRadius: 4,
-};
-
-// markup
 const NotFoundPage = () => {
   return (
-    <main style={pageStyles}>
+    <main className="bg-gray-800 px-8 text-gray-200 font-serif flex flex-col h-screen justify-center align-middle">
-      <title>Not found</title>
+      <title className="text-4xl font-black">Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
+      <h1>Page not found</h1>
-      <p style={paragraphStyles}>
+      <p>
         Sorry{" "}
         <span aria-label="Pensive emoji" role="img">
           😔
         </span>{" "}
         we couldn’t find what you were looking for.
         <br />
-        {process.env.NODE_ENV === "development" ? (
+        <Link className="text-blue-400" to="/">
-          <>
+          Go home
-            <br />
+        </Link>
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+        .
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
       </p>
     </main>
   );