-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (162 loc) · 8.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tailwind trello clone</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;">
<div class="bg-blue w-full h-screen font-sans">
<div class="flex p-2 bg-blue-dark items-center">
<div class="hidden md:flex justify-start">
<button class="bg-blue-light rounded p-2 font-bold text-white text-sm mr-2 flex">
<svg class="fill-current text-white h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M41 4H9C6.24 4 4 6.24 4 9v32c0 2.76 2.24 5 5 5h32c2.76 0 5-2.24 5-5V9c0-2.76-2.24-5-5-5zM21 36c0 1.1-.9 2-2 2h-7c-1.1 0-2-.9-2-2V12c0-1.1.9-2 2-2h7c1.1 0 2 .9 2 2v24zm19-12c0 1.1-.9 2-2 2h-7c-1.1 0-2-.9-2-2V12c0-1.1.9-2 2-2h7c1.1 0 2 .9 2 2v12z" />
</svg>
Pannels
</button>
<input type="text" class="bg-blue-light rounded p-2">
</div>
<div class="mx-0 md:mx-auto">
<h1 class="text-blue-lighter text-xl flex items-center font-sans italic">
<svg class="fill-current h-8 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M41 4H9C6.24 4 4 6.24 4 9v32c0 2.76 2.24 5 5 5h32c2.76 0 5-2.24 5-5V9c0-2.76-2.24-5-5-5zM21 36c0 1.1-.9 2-2 2h-7c-1.1 0-2-.9-2-2V12c0-1.1.9-2 2-2h7c1.1 0 2 .9 2 2v24zm19-12c0 1.1-.9 2-2 2h-7c-1.1 0-2-.9-2-2V12c0-1.1.9-2 2-2h7c1.1 0 2 .9 2 2v12z" />
</svg>
Trello
</h1>
</div>
<div class="flex items-center ml-auto">
<button class="bg-blue-light rounded h-8 w-8 font-bold text-white text-sm mr-2">+</button>
<button class="bg-blue-light rounded h-8 w-8 font-bold text-white text-sm mr-2">i</button>
<button class="bg-red rounded h-8 w-8 font-bold text-white text-sm mr-2">
<svg class="h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 2c-.8 0-1.5.7-1.5 1.5v.688C7.344 4.87 5 7.62 5 11v4.5l-2 2.313V19h18v-1.188L19 15.5V11c0-3.379-2.344-6.129-5.5-6.813V3.5c0-.8-.7-1.5-1.5-1.5zm-2 18c0 1.102.898 2 2 2 1.102 0 2-.898 2-2z" />
</svg>
</button>
<img
src="https://lh3.googleusercontent.com/-_5j0-dxnWUA/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucns2T5LKXwqhI3qVQhrAaH99RdlLA/photo.jpg?sz=46"
class="h-8 rounded-full"
/>
</div>
</div>
<div class="flex m-4 justify-between">
<div class="flex">
<h3 class="text-white mr-4">Gandharv garg</h3>
<ul class="list-reset text-white hidden md:flex">
<li><span class="font-bold text-lg px-2">☆</span></li>
<li><span class="border-l border-blue-lighter px-2 text-sm">gandharv.com</span> <span
class="rounded-lg bg-blue-light text-xs px-2 py-1">Free</span></li>
<li><span class="border-l border-blue-lighter px-2 text-sm ml-2">Team Visible</span></li>
</ul>
</div>
<div class="text-white font-sm text-underlined hidden md:flex items-center underline">
<svg class="h-4 fill-current text-white cursor-pointer mr-2" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
Show menu
</div>
</div>
<div class="flex px-4 pb-8 items-start overflow-x-scroll">
<div class="rounded bg-grey-light flex-no-shrink w-64 p-2 mr-3">
<div class="flex justify-between py-1">
<h3 class="ml-1 text-sm">Todo</h3>
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
</div>
<div class="text-sm mt-2">
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter">
Check the responsive layout on all devices
<div class="text-grey-darker mt-8 ml-2 flex justify-between items-start">
<span class="text-xs flex items-center">
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
</svg>
3/5
</span>
<img
src="https://lh3.googleusercontent.com/-_5j0-dxnWUA/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucns2T5LKXwqhI3qVQhrAaH99RdlLA/photo.jpg?sz=46"
class="h-8 rounded-full" />
</div>
</div>
<p class="mt-8 p-2 pl-0 text-grey-dark">Add a card...</p>
</div>
</div>
<div class="rounded bg-grey-light flex-no-shrink w-64 p-2 mr-3">
<div class="flex justify-between py-1">
<h3 class="text-sm">Doing</h3>
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
</div>
<div class="text-sm mt-2">
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter">
Check the responsive layout on all devices
<div class="text-grey-darker mt-8 ml-2 flex justify-between items-start">
<span class="text-xs flex items-center">
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
</svg>
3/5
</span>
<img
src="https://lh3.googleusercontent.com/-_5j0-dxnWUA/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucns2T5LKXwqhI3qVQhrAaH99RdlLA/photo.jpg?sz=46"
class="h-8 rounded-full" />
</div>
</div>
<p class="mt-8 p-2 pl-0 text-grey-dark">Add a card...</p>
</div>
</div>
<div class="rounded bg-grey-light flex-no-shrink w-64 p-2 mr-3">
<div class="flex justify-between py-1">
<h3 class="text-sm">Done</h3>
<svg class="h-4 fill-current text-grey-dark cursor-pointer" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path
d="M5 10a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4zm7 0a1.999 1.999 0 1 0 0 4 1.999 1.999 0 1 0 0-4z" />
</svg>
</div>
<div class="text-sm mt-2">
<div class="bg-white p-2 rounded mt-1 border-b border-grey cursor-pointer hover:bg-grey-lighter">
Check the responsive layout on all devices
<div class="text-grey-darker mt-8 ml-2 flex justify-between items-start">
<span class="text-xs flex items-center">
<svg class="h-4 fill-current mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path
d="M11 4c-3.855 0-7 3.145-7 7v28c0 3.855 3.145 7 7 7h28c3.855 0 7-3.145 7-7V11c0-3.855-3.145-7-7-7zm0 2h28c2.773 0 5 2.227 5 5v28c0 2.773-2.227 5-5 5H11c-2.773 0-5-2.227-5-5V11c0-2.773 2.227-5 5-5zm25.234 9.832l-13.32 15.723-8.133-7.586-1.363 1.465 9.664 9.015 14.684-17.324z" />
</svg>
3/5
</span>
<img
src="https://lh3.googleusercontent.com/-_5j0-dxnWUA/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucns2T5LKXwqhI3qVQhrAaH99RdlLA/photo.jpg?sz=46"
class="h-8 rounded-full" />
</div>
</div>
<p class="mt-8 p-2 pl-0 text-grey-dark">Add a card...</p>
</div>
</div>
</div>
</div>
<!-- <script type="module">
import { h, Component, render } from 'https://unpkg.com/preact?module';
import htm from 'https://unpkg.com/htm?module';
// Initialize htm with Preact
const html = htm.bind(h);
const app = html`<h1>Hello World!</h1>`;
render(app, document.body);
</script> -->
</body>
</html>