ftonato/alpinejs-html-structure.html

## alpinejs-html-structure.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Alpinejs + TailwindCSS • Todo List</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://unpkg.com/tailwindcss@0.3.0/dist/tailwind.min.css"
      rel="stylesheet"
    />

    <style>
      body {
        background-color: #8bc6ec;
        background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
      }
    </style>
  </head>

  <body class="h-screen overflow-hidden flex items-center justify-center">
    <div class="h-100 w-full flex items-center justify-center font-sans">
      <div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
        <div class="mb-4">
          <h1 class="text-grey-darkest">Alpinejs + TailwindCSS • Todo List</h1>

          <div class="flex mt-4">
            <input
              class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker"
              placeholder="Adicionar um novo item" />

            <button
              class="flex-no-shrink p-2 border-2 rounded text-teal border-teal hover:text-white hover:bg-teal">
              Adicionar
            </button>
          </div>
        </div>

        <div>
          <div class="flex mb-4 items-center">
            <p class="w-full text-grey-darkest">Primeiro item da nossa lista</p>

            <button
              class="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green border-green hover:bg-green">
              Concluído
            </button>

            <button
              class="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red">
              Remover
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
    <script src="src/app.js"></script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Alpinejs + TailwindCSS • Todo List</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link
	href="https://unpkg.com/tailwindcss@0.3.0/dist/tailwind.min.css"
	rel="stylesheet"
	/>

	<style>
	body {
	background-color: #8bc6ec;
	background-image: linear-gradient(135deg, #8bc6ec 0%, #9599e2 100%);
	}
	</style>
	</head>

	<body class="h-screen overflow-hidden flex items-center justify-center">
	<div class="h-100 w-full flex items-center justify-center font-sans">
	<div class="bg-white rounded shadow p-6 m-4 w-full lg:w-3/4 lg:max-w-lg">
	<div class="mb-4">
	<h1 class="text-grey-darkest">Alpinejs + TailwindCSS • Todo List</h1>

	<div class="flex mt-4">
	<input
	class="shadow appearance-none border rounded w-full py-2 px-3 mr-4 text-grey-darker"
	placeholder="Adicionar um novo item" />

	<button
	class="flex-no-shrink p-2 border-2 rounded text-teal border-teal hover:text-white hover:bg-teal">
	Adicionar
	</button>
	</div>
	</div>

	<div>
	<div class="flex mb-4 items-center">
	<p class="w-full text-grey-darkest">Primeiro item da nossa lista</p>

	<button
	class="flex-no-shrink p-2 ml-4 mr-2 border-2 rounded hover:text-white text-green border-green hover:bg-green">
	Concluído
	</button>

	<button
	class="flex-no-shrink p-2 ml-2 border-2 rounded text-red border-red hover:text-white hover:bg-red">
	Remover
	</button>
	</div>
	</div>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
	<script src="src/app.js"></script>
	</body>
	</html>