Tailwind core concepts/0-readme.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/public/tailwind.css" rel="stylesheet" />
  </head>
  <body class="h-full bg-gray-50 bg-circuit-pattern">
    <main class="space-y-4">
      <div class="m-4 bg-white shadow bg-opacity-90 rounded-xl">
        <div class="px-4 py-16 mx-auto max-w-7xl sm:py-24 sm:px-6 lg:px-8">
          <div class="text-center">
            <p class="text-base font-semibold tracking-wide text-indigo-600 uppercase">Kodeworks Workshop</p>
            <h1 class="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">Tailwind core concepts.</h1>
            <p class="max-w-xl mx-auto mt-5 text-xl text-gray-500">
              This is a condensed version of the <i>core concepts </i> section in the
              <a class="text-indigo-600" href="https://tailwindcss.com/docs/utility-first" target="_blank" rel="noopener noreferrer">Tailwind docs</a>.
            </p>
          </div>
        </div>
      </div>
      <ul class="m-4 overflow-hidden text-indigo-600 list-decimal list-inside bg-white rounded-lg shadow bg-opacity-90">
        <li class="px-4 py-5 sm:p-6">
          <a href="/tailwind core concepts/1-utility-first.html" target="_blank">Utility first</a>
        </li>
        <li class="px-4 py-5 sm:p-6">
          <a href="/tailwind core concepts/2-responsive-design.html" target="_blank">Responsive design</a>
        </li>
      </ul>
    </main>
  </body>
</html>