Created a little landing page for the copies.

pages/copy/index.html

@@ -0,0 +1,24 @@
+<style>
+@import "/style.css";
+</style>
+<div class="flex flex-col p-4 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 gap-4! *:text-xl">
+  <h1 class="pb-10!">Copying Popular Websites to Learn Tailwind</h1>
+
+  <p>I've advocated for years that copying other websites is the best way to learn web design. Copying is a <b>very</b> common and established way to learn almost any creative discipline including (but not limited to): Painting, Drawing, Writing, Music, Wood Working, Lutherie, Design, and Programming.  To demonstrate this I've been doing copies of websites to learn <a class="text-gray-950 bg-gray-300" href="https://tailwindcss.com/">Tailwind</a>.
+  </p>
+
+  <h2 class="pb-8">Current Examples</h2>
+  <p>Here's the ones I've done so far</p>
+
+  <ul class="p-4">
+    <li><a class="text-gray-950 bg-gray-300" href="/copy/gitea.html">Gitea Project Page</a></li>
+    <li><a class="text-gray-950 bg-gray-300" href="/copy/linkedin.html">Linkedin Mobile</a></li>
+    <li><a class="text-gray-950 bg-gray-300" href="/copy/stride.html">Stride Game Framework</a></li>
+    <li><a class="text-gray-950 bg-gray-300" href="/copy/twitch.html">Twitch Home Page</a></li>
+  </ul>
+
+  <h2 class="pb-8">View the Code</h2>
+  <p>You can view this code at <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games">my git repository</a>.  The copies can be found in <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/zedshaw-games/src/branch/main/pages/copy">pages/copy</a> and the tool I use to generate the pages is one I wrote called <a class="text-gray-950 bg-gray-300" href="https://git.learnjsthehardway.com/learn-code-the-hard-way/ssgod">ssgod</a>.
+  </p>
+
+</div>

static/style.css

@@ -346,6 +346,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-4\! {
+    gap: calc(var(--spacing) * 4) !important;
+  }
   .gap-5 {
     gap: calc(var(--spacing) * 5);
   }
@@ -355,6 +358,9 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
+  .gap-10\! {
+    gap: calc(var(--spacing) * 10) !important;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -486,24 +492,45 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-40 {
+    padding: calc(var(--spacing) * 40);
+  }
+  .p-40\! {
+    padding: calc(var(--spacing) * 40) !important;
+  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
   .pb-0\! {
     padding-bottom: calc(var(--spacing) * 0) !important;
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
+  .pb-3\! {
+    padding-bottom: calc(var(--spacing) * 3) !important;
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-4\! {
+    padding-bottom: calc(var(--spacing) * 4) !important;
+  }
   .pb-5 {
     padding-bottom: calc(var(--spacing) * 5);
   }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+  .pb-10\! {
+    padding-bottom: calc(var(--spacing) * 10) !important;
+  }
   .text-center {
     text-align: center;
   }
@@ -559,6 +586,12 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .\*\:text-xl {
+    :is(& > *) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
   .\*\:text-nowrap {
     :is(& > *) {
       text-wrap: nowrap;