refactor(tailwind): update baseline sample design

Author: simeonoff

src/app/theming/tailwind/tailwind-sample.component.html

@@ -1,11 +1,23 @@
-<main class="font-ig text-base grid surface-500 px-6 py-6">
-  <div class="text-center shadow-elevation-4 pb-8">
-    <p class="type-style-body-1 text-primary-600">404</p>
-    <h1 class="type-style-h1 text-gray-900">Page not found</h1>
-    <p class="type-style-body-1 text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
-    <div class="mt-10 flex items-center justify-center gap-x-6">
-      <a href="#" class="type-style-button rounded-md bg-primary-500 text-primary-500-contrast px-3.5 py-2.5 shadow-elevation-2 hover:bg-primary-600 transition duration-150 ease-in-out">Go back home</a>
-      <a href="#" class="type-style-button text-gray-900 hover:text-primary-600 transition duration-150 ease-in-out">Contact support <span aria-hidden="true">&rarr;</span></a>
+<main class="font-ig text-base grid bg-surface-500 px-6 py-6">
+    <div class="text-center shadow-elevation-24 p-24 rounded-lg">
+        <h3 class="type-style-h3 text-secondary-600 font-light">404</h3>
+        <h3 class="type-style-h3 text-gray-800 uppercase font-bold">
+            Page not found
+        </h3>
+        <p class="type-style-body-1 text-gray-600">
+            Sorry, we couldn’t find the page you’re looking for.
+        </p>
+        <div class="mt-10 flex items-center justify-center gap-x-6 mb-16">
+            <a
+                href="#"
+                class="type-style-button rounded-md bg-secondary-500 text-secondary-500-contrast px-3.5 py-2.5 shadow-elevation-2 hover:bg-secondary-600 transition duration-150 ease-in-out"
+                >Go back home</a
+            >
+            <a
+                href="#"
+                class="type-style-button text-gray-800 hover:text-secondary-600 transition duration-150 ease-in-out"
+                >Contact support <span aria-hidden="true">&rarr;</span></a
+            >
+        </div>
     </div>
-  </div>
 </main>