index.html

<!doctype html>
<html class="bg-gray-200">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Template</title>
  </head>

  <body>
    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div
        class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center md:block md:p-0"
      >
        <!-- This element is to trick the browser into centering the contents. -->
        <span class="hidden md:inline-block md:align-middle md:h-screen" aria-hidden="true"
          >&#8203;</span
        >

        <div
          class="inline-block px-4 py-10 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl md:my-8 md:align-middle md:max-w-2xl md:w-full md:px-8"
        >
          <div>
            <img src="/src/logo.png" class="w-64 mx-auto" />
            <div class="mt-8 text-center">
              <h1 class="font-serif text-3xl font-bold tracking-wide text-gray-900">
                Tailwind CSS Template
              </h1>
              <div class="mt-8 space-y-4">
                <p class="text-gray-700">
                  A framework-less, plain-old-HTML template using Tailwind CSS. Use it as a template
                  for a simple landing page or as a starting point for something more.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>