<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.2.0/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js"
defer></script>
</head>
<body class="bg-gray-400 text-gray-800">
<div class="container mx-auto max-w-sm px-4 my-4">
<div class="bg-white shadow-md rounded px-6 py-4">
<h2 class="text-2xl font-bold">Todo App</h2>
<div class="mt-4 mb-6">
<input type="text" class="shadow w-full px-2 py-2">
</div>
<ul class="mb-6">
<li class="flex items-center justify-between">
<div class="flex items-center">
<input type="checkbox">
<div class="ml-3">Finish Alpine Screencast</div>
</div>
<button class="text-xl ml-2">×</button>
</li>
<li class="flex items-center justify-between mt-4">
<div class="flex items-center">
<input type="checkbox">
<div class="ml-3 line-through">Learn on Scrimba</div>
</div>
<button class="text-xl ml-2">×</button>
</li>
<li class="flex items-center justify-between mt-4">
<div class="flex items-center">
<input type="checkbox">
<div class="ml-3">Take over world</div>
</div>
<button class="text-xl ml-2">×</button>
</li>
</ul>
</div>
</div>
</body>
</html>