gsrai · March 28, 2022 14:31 · gsrai · Mar 28, 2022
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>404 Not Found - React + Babel + Tailwind HTML only</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      
      const App = () => {
        return (
          <div class="m-6 flex flex-col space-y-10 mx-20">
            <h1 class="text-center text-9xl font-semibold">404</h1>
            <main class="text-lg text-center m-auto w-11/12 ">
              <h2 class="text-2xl pb-3 inline-block">Oops, you're lost.</h2>
              <p>The page you are looking for does not exist.
                How you got here is a mystery. But you can <a href="#" class="font-semibold underline text-blue-500 decoration-amber-500">click here</a> go back to the homepage.
              </p>
            </main>
            <div class="m-auto w-9/12 flex justify-center items-center">
              <blockquote class=" italic text-2xl font-serif border-l-4 border-black pl-4">
                <p class="my-3">The more you know, the more you realize you know nothing.</p>
                <cite class="text-lg opacity-80 before:content-['_—_']">Aristotle</cite>
              </blockquote>
            </div>
          </div>
        );
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
    -->
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>404 Not Found - React + Babel + Tailwind HTML only</title>
	<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

	<!-- Don't use this in production: -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script src="https://cdn.tailwindcss.com/"></script>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/babel">

	const App = () => {
	return (
	<div class="m-6 flex flex-col space-y-10 mx-20">
	<h1 class="text-center text-9xl font-semibold">404</h1>
	<main class="text-lg text-center m-auto w-11/12 ">
	<h2 class="text-2xl pb-3 inline-block">Oops, you're lost.</h2>
	<p>The page you are looking for does not exist.
	How you got here is a mystery. But you can <a href="#" class="font-semibold underline text-blue-500 decoration-amber-500">click here</a> go back to the homepage.
	</p>
	</main>
	<div class="m-auto w-9/12 flex justify-center items-center">
	<blockquote class=" italic text-2xl font-serif border-l-4 border-black pl-4">
	<p class="my-3">The more you know, the more you realize you know nothing.</p>
	<cite class="text-lg opacity-80 before:content-['_—_']">Aristotle</cite>
	</blockquote>
	</div>
	</div>
	);
	}

	ReactDOM.render(
	<App />,
	document.getElementById('root')
	);

	</script>
	<!--
	Note: this page is a great way to try React but it's not suitable for production.
	It slowly compiles JSX with Babel in the browser and uses a large development build of React.
	-->
	</body>
	</html>