twitter-for-coders/pages/examples/index.html

<style>
@import "/style.css";
</style>
<main 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://lcthw.dev/go/zedshaw-games">my git repository</a>.  The copies can be found in <a class="text-gray-950 bg-gray-300" href="https://lcthw.dev/go/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://lcthw.dev/go/ssgod">ssgod</a>.
  </p>

</main>