Skip to content

Instantly share code, notes, and snippets.

@thanapongp

thanapongp/index.html

Created September 7, 2019 07:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thanapongp/31e12e40dbce75ed32a596ee41f0bec7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thanapongp/31e12e40dbce75ed32a596ee41f0bec7 to your computer and use it in GitHub Desktop.
Download ZIP
Complied index.html
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ES6 Todo List</title>
</head>
<body class="bg-gray-700">
<div class="w-full max-w-lg mt-16 mx-auto">
<h1 class="font-thin text-white text-4xl text-center mb-4 tracking-wider">
ES6 Todo List
</h1>
<div class="px-12">
<input type="text" id="input" placeholder="Add new item" class="bg-gray-800 px-4 py-2 rounded block w-full text-gray-200 font-light">
<ul class="list-none" id="list-root">
<!-- <li class="flex py-4 border-b border-gray-900">
<div>
<input type="checkbox">
</div>
<div class="flex-grow mx-4">
<div class="text-gray-100 font-normal tracking-wide">
Todo list text
</div>
<div class="text-gray-600 font-light text-xs mt-1 tracking-wide">
Added: 17 August 2019 16:00
</div>
</div>
<div>
<button>
<svg class="stroke-current text-gray-600 h-4" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
</button>
<button class="text-gray-600 text-2xl">&times;</button>
</div>
</li> -->
<!-- <li class="flex py-4 border-b border-gray-900">
<div>
<input type="checkbox" checked>
</div>
<div class="flex-grow mx-4">
<div class="text-gray-100 font-normal tracking-wide line-through">
Todo list text
</div>
<div class="text-gray-600 font-light text-xs mt-1 tracking-wide">
Added: 17 August 2019 16:00
</div>
</div>
<div>
<button>
<svg class="stroke-current text-gray-600 h-4" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
</svg>
</button>
<button class="text-gray-600 text-2xl">&times;</button>
</div>
</li> -->
<!-- <li class="text-center text-xl font-light text-gray-600 pt-4">
No item yet!
</li> -->
</ul>
</div>
</div>
<script type="text/javascript" src="index.js"></script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment