Skip to content

Instantly share code, notes, and snippets.

@ftonato
Last active January 12, 2021 14:12
Show Gist options
  • Save ftonato/988f8fb6e65f6dc4711ff6d0d7be6f5c to your computer and use it in GitHub Desktop.
Save ftonato/988f8fb6e65f6dc4711ff6d0d7be6f5c to your computer and use it in GitHub Desktop.
alpinejs-html-structure
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment