Hugging Face's logo

Spaces:
mvbhr
/
taskflow-dashboard
Running

App Files Community
mvbhr commited on
Commit
3d6fa26
·
verified ·
1 Parent(s): 7ce3503

criar a página de Projects

Browse files
Files changed (2) hide show
  1. projects.html +430 -0
  2. tasks.html +1 -1
projects.html ADDED
@@ -0,0 +1,430 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Projects - TaskFlow</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f9fafb;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ .progress-bar {
21
+ transition: width 0.5s ease-in-out;
22
+ }
23
+ .status-active {
24
+ background-color: #dcfce7;
25
+ color: #166534;
26
+ }
27
+ .status-paused {
28
+ background-color: #fef3c7;
29
+ color: #d97706;
30
+ }
31
+ .status-completed {
32
+ background-color: #dbeafe;
33
+ color: #1e40af;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50">
38
+ <!-- Navigation -->
39
+ <nav class="bg-white shadow-sm">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between h-16">
42
+ <div class="flex items-center">
43
+ <div class="flex-shrink-0 flex items-center">
44
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center">
45
+ <i data-feather="layers" class="text-white"></i>
46
+ </div>
47
+ <span class="ml-2 text-xl font-bold text-gray-900">TaskFlow</span>
48
+ </div>
49
+ <div class="hidden md:ml-6 md:flex md:space-x-8">
50
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
51
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
52
+ <a href="tasks.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
53
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
54
+ </div>
55
+ </div>
56
+ <div class="flex items-center">
57
+ <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
58
+ <i data-feather="bell"></i>
59
+ </button>
60
+ <div class="ml-3 relative">
61
+ <div class="flex items-center space-x-3 cursor-pointer">
62
+ <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
63
+ <span class="text-indigo-800 font-medium">U</span>
64
+ </div>
65
+ <span class="text-sm font-medium text-gray-700">User</span>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </nav>
72
+
73
+ <!-- Main Content -->
74
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
75
+ <!-- Header -->
76
+ <div class="mb-8">
77
+ <div class="flex justify-between items-center">
78
+ <div>
79
+ <h1 class="text-3xl font-bold text-gray-900">Projects</h1>
80
+ <p class="mt-2 text-gray-600">Manage and track all your projects</p>
81
+ </div>
82
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none">
83
+ <i data-feather="plus" class="mr-2 h-4 w-4"></i>
84
+ New Project
85
+ </button>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- Filters and Search -->
90
+ <div class="mb-6 flex flex-col sm:flex-row gap-4">
91
+ <div class="flex-1">
92
+ <input type="text" placeholder="Search projects..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
93
+ </div>
94
+ <div class="flex gap-2">
95
+ <select class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
96
+ <option>All Status</option>
97
+ <option>Active</option>
98
+ <option>Paused</option>
99
+ <option>Completed</option>
100
+ </select>
101
+ <select class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
102
+ <option>All Teams</option>
103
+ <option>Design</option>
104
+ <option>Development</option>
105
+ <option>Marketing</option>
106
+ </select>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Projects Grid -->
111
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
112
+ <!-- Project 1 -->
113
+ <div class="bg-white rounded-lg shadow card-hover transition-all duration-300">
114
+ <div class="p-6">
115
+ <div class="flex items-center justify-between mb-4">
116
+ <div class="flex items-center">
117
+ <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
118
+ <i data-feather="globe" class="h-5 w-5 text-indigo-600"></i>
119
+ </div>
120
+ <div class="ml-3">
121
+ <h3 class="text-lg font-medium text-gray-900">Website Redesign</h3>
122
+ </div>
123
+ </div>
124
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-active">
125
+ Active
126
+ </span>
127
+ </div>
128
+ <p class="text-gray-500 text-sm mb-4">Complete redesign of company website with modern UI/UX</p>
129
+ <div class="mb-4">
130
+ <div class="flex justify-between text-sm mb-1">
131
+ <span class="text-gray-600">Progress</span>
132
+ <span class="font-medium text-gray-900">75%</span>
133
+ </div>
134
+ <div class="w-full bg-gray-200 rounded-full h-2">
135
+ <div class="bg-indigo-600 h-2 rounded-full progress-bar" style="width: 75%"></div>
136
+ </div>
137
+ <div class="flex items-center justify-between text-sm text-gray-500">
138
+ <span>12 tasks</span>
139
+ <span>Jun 30</span>
140
+ </div>
141
+ <div class="mt-4 flex items-center">
142
+ <div class="flex -space-x-2">
143
+ <div class="h-6 w-6 rounded-full bg-blue-500 border-2 border-white"></div>
144
+ <div class="h-6 w-6 rounded-full bg-green-500 border-2 border-white"></div>
145
+ <div class="h-6 w-6 rounded-full bg-yellow-500 border-2 border-white"></div>
146
+ <div class="h-6 w-6 rounded-full bg-gray-300 border-2 border-white flex items-center justify-center">
147
+ <span class="text-xs text-gray-600">+2</span>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Project 2 -->
154
+ <div class="bg-white rounded-lg shadow card-hover transition-all duration-300">
155
+ <div class="p-6">
156
+ <div class="flex items-center justify-between mb-4">
157
+ <div class="flex items-center">
158
+ <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
159
+ <i data-feather="smartphone" class="h-5 w-5 text-green-600"></i>
160
+ </div>
161
+ <div class="ml-3">
162
+ <h3 class="text-lg font-medium text-gray-900">Mobile App Development</h3>
163
+ </div>
164
+ </div>
165
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-active">
166
+ Active
167
+ </span>
168
+ </div>
169
+ <p class="text-gray-500 text-sm mb-4">Native mobile application for iOS and Android platforms</p>
170
+ <div class="mb-4">
171
+ <div class="flex justify-between text-sm mb-1">
172
+ <span class="text-gray-600">Progress</span>
173
+ <span class="font-medium text-gray-900">45%</span>
174
+ </div>
175
+ <div class="w-full bg-gray-200 rounded-full h-2">
176
+ <div class="bg-green-600 h-2 rounded-full progress-bar" style="width: 45%"></div>
177
+ </div>
178
+ <div class="flex items-center justify-between text-sm text-gray-500">
179
+ <span>18 tasks</span>
180
+ <span>Aug 15</span>
181
+ </div>
182
+ <div class="mt-4 flex items-center">
183
+ <div class="flex -space-x-2">
184
+ <div class="h-6 w-6 rounded-full bg-purple-500 border-2 border-white"></div>
185
+ <div class="h-6 w-6 rounded-full bg-red-500 border-2 border-white"></div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Project 3 -->
192
+ <div class="bg-white rounded-lg shadow card-hover transition-all duration-300">
193
+ <div class="p-6">
194
+ <div class="flex items-center justify-between mb-4">
195
+ <div class="flex items-center">
196
+ <div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
197
+ <i data-feather="trending-up" class="h-5 w-5 text-yellow-600"></i>
198
+ </div>
199
+ <div class="ml-3">
200
+ <h3 class="text-lg font-medium text-gray-900">Marketing Campaign</h3>
201
+ </div>
202
+ </div>
203
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-completed">
204
+ Completed
205
+ </span>
206
+ </div>
207
+ <p class="text-gray-500 text-sm mb-4">Q2 marketing campaign for product launch</p>
208
+ <div class="mb-4">
209
+ <div class="flex justify-between text-sm mb-1">
210
+ <span class="text-gray-600">Progress</span>
211
+ <span class="font-medium text-gray-900">100%</span>
212
+ </div>
213
+ <div class="w-full bg-gray-200 rounded-full h-2">
214
+ <div class="bg-yellow-500 h-2 rounded-full progress-bar" style="width: 100%"></div>
215
+ </div>
216
+ <div class="flex items-center justify-between text-sm text-gray-500">
217
+ <span>8 tasks</span>
218
+ <span>May 30</span>
219
+ </div>
220
+ <div class="mt-4 flex items-center">
221
+ <div class="flex -space-x-2">
222
+ <div class="h-6 w-6 rounded-full bg-pink-500 border-2 border-white"></div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Project 4 -->
229
+ <div class="bg-white rounded-lg shadow card-hover transition-all duration-300">
230
+ <div class="p-6">
231
+ <div class="flex items-center justify-between mb-4">
232
+ <div class="flex items-center">
233
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
234
+ <i data-feather="users" class="h-5 w-5 text-blue-600"></i>
235
+ </div>
236
+ <div class="ml-3">
237
+ <h3 class="text-lg font-medium text-gray-900">Client Onboarding</h3>
238
+ </div>
239
+ </div>
240
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-paused">
241
+ Paused
242
+ </span>
243
+ </div>
244
+ <p class="text-gray-500 text-sm mb-4">New client onboarding process and documentation</p>
245
+ <div class="mb-4">
246
+ <div class="flex justify-between text-sm mb-1">
247
+ <span class="text-gray-600">Progress</span>
248
+ <span class="font-medium text-gray-900">30%</span>
249
+ </div>
250
+ <div class="w-full bg-gray-200 rounded-full h-2">
251
+ <div class="bg-blue-600 h-2 rounded-full progress-bar" style="width: 30%"></div>
252
+ </div>
253
+ <div class="flex items-center justify-between text-sm text-gray-500">
254
+ <span>6 tasks</span>
255
+ <span>Jul 20</span>
256
+ </div>
257
+ <div class="mt-4 flex items-center">
258
+ <div class="flex -space-x-2">
259
+ <div class="h-6 w-6 rounded-full bg-gray-400 border-2 border-white"></div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Project 5 -->
266
+ <div class="bg-white rounded-lg shadow card-hover transition-all duration-300">
267
+ <div class="p-6">
268
+ <div class="flex items-center justify-between mb-4">
269
+ <div class="flex items-center">
270
+ <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
271
+ <i data-feather="shopping-cart" class="h-5 w-5 text-purple-600"></i>
272
+ </div>
273
+ <div class="ml-3">
274
+ <h3 class="text-lg font-medium text-gray-900">E-commerce Platform</h3>
275
+ </div>
276
+ </div>
277
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-active">
278
+ Active
279
+ </span>
280
+ </div>
281
+ <p class="text-gray-500 text-sm mb-4">New e-commerce platform with advanced features</p>
282
+ <div class="mb-4">
283
+ <div class="flex justify-between text-sm mb-1">
284
+ <span class="text-gray-600">Progress</span>
285
+ <span class="font-medium text-gray-900">60%</span>
286
+ </div>
287
+ <div class="w-full bg-gray-200 rounded-full h-2">
288
+ <div class="bg-purple-600 h-2 rounded-full progress-bar" style="width: 60%"></div>
289
+ </div>
290
+ <div class="flex items-center justify-between text-sm text-gray-500">
291
+ <span>15 tasks</span>
292
+ <span>Sep 10</span>
293
+ </div>
294
+ <div class="mt-4 flex items-center">
295
+ <div class="flex -space-x-2">
296
+ <div class="h-6 w-6 rounded-full bg-indigo-500 border-2 border-white"></div>
297
+ <div class="h-6 w-6 rounded-full bg-teal-500 border-2 border-white"></div>
298
+ <div class="h-6 w-6 rounded-full bg-orange-500 border-2 border-white"></div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Project 6 -->
305
+ <div class="bg-white rounded-lg shadow card-hover transition-all duration-300">
306
+ <div class="p-6">
307
+ <div class="flex items-center justify-between mb-4">
308
+ <div class="flex items-center">
309
+ <div class="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
310
+ <i data-feather="bar-chart" class="h-5 w-5 text-red-600"></i>
311
+ </div>
312
+ <div class="ml-3">
313
+ <h3 class="text-lg font-medium text-gray-900">Analytics Dashboard</h3>
314
+ </div>
315
+ </div>
316
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium status-active">
317
+ Active
318
+ </span>
319
+ </div>
320
+ <p class="text-gray-500 text-sm mb-4">Real-time analytics dashboard for business metrics</p>
321
+ <div class="mb-4">
322
+ <div class="flex justify-between text-sm mb-1">
323
+ <span class="text-gray-600">Progress</span>
324
+ <span class="font-medium text-gray-900">25%</span>
325
+ </div>
326
+ <div class="w-full bg-gray-200 rounded-full h-2">
327
+ <div class="bg-red-600 h-2 rounded-full progress-bar" style="width: 25%"></div>
328
+ </div>
329
+ <div class="flex items-center justify-between text-sm text-gray-500">
330
+ <span>10 tasks</span>
331
+ <span>Oct 05</span>
332
+ </div>
333
+ <div class="mt-4 flex items-center">
334
+ <div class="flex -space-x-2">
335
+ <div class="h-6 w-6 rounded-full bg-gray-500 border-2 border-white"></div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+ </div>
341
+
342
+ <!-- Project Stats -->
343
+ <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-6">
344
+ <div class="bg-white overflow-hidden shadow rounded-lg">
345
+ <div class="px-4 py-5 sm:p-6">
346
+ <div class="flex items-center">
347
+ <div class="flex-shrink-0 bg-indigo-100 rounded-md p-3">
348
+ <i data-feather="folder" class="h-6 w-6 text-indigo-600"></i>
349
+ </div>
350
+ <div class="ml-5 w-0 flex-1">
351
+ <dl>
352
+ <dt class="text-sm font-medium text-gray-500 truncate">Total Projects</dt>
353
+ <dd class="flex items-baseline">
354
+ <div class="text-2xl font-semibold text-gray-900">12</div>
355
+ </dd>
356
+ </dl>
357
+ </div>
358
+ </div>
359
+ </div>
360
+
361
+ <div class="bg-white overflow-hidden shadow rounded-lg">
362
+ <div class="px-4 py-5 sm:p-6">
363
+ <div class="flex items-center">
364
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-3">
365
+ <i data-feather="play" class="h-6 w-6 text-green-600"></i>
366
+ </div>
367
+ <div class="ml-5 w-0 flex-1">
368
+ <dl>
369
+ <dt class="text-sm font-medium text-gray-500 truncate">Active</dt>
370
+ <dd class="flex items-baseline">
371
+ <div class="text-2xl font-semibold text-gray-900">8</div>
372
+ </dd>
373
+ </dl>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="bg-white overflow-hidden shadow rounded-lg">
379
+ <div class="px-4 py-5 sm:p-6">
380
+ <div class="flex items-center">
381
+ <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">
382
+ <i data-feather="pause" class="h-6 w-6 text-yellow-600"></i>
383
+ </div>
384
+ <div class="ml-5 w-0 flex-1">
385
+ <dl>
386
+ <dt class="text-sm font-medium text-gray-500 truncate">Paused</dt>
387
+ <dd class="flex items-baseline">
388
+ <div class="text-2xl font-semibold text-gray-900">2</div>
389
+ </dd>
390
+ </dl>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <div class="bg-white overflow-hidden shadow rounded-lg">
396
+ <div class="px-4 py-5 sm:p-6">
397
+ <div class="flex items-center">
398
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">
399
+ <i data-feather="check-circle" class="h-6 w-6 text-blue-600"></i>
400
+ </div>
401
+ <div class="ml-5 w-0 flex-1">
402
+ <dl>
403
+ <dt class="text-sm font-medium text-gray-500 truncate">Completed</dt>
404
+ <dd class="flex items-baseline">
405
+ <div class="text-2xl font-semibold text-gray-900">2</div>
406
+ </dd>
407
+ </dl>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </main>
413
+
414
+ <script>
415
+ feather.replace();
416
+
417
+ // Animate progress bars on load
418
+ document.addEventListener('DOMContentLoaded', function() {
419
+ const progressBars = document.querySelectorAll('.progress-bar');
420
+ progressBars.forEach(bar => {
421
+ const width = bar.style.width;
422
+ bar.style.width = '0';
423
+ setTimeout(() => {
424
+ bar.style.width = width;
425
+ }, 300);
426
+ });
427
+ });
428
+ </script>
429
+ </body>
430
+ </html>
tasks.html CHANGED
@@ -61,7 +61,7 @@
61
  <div class="hidden md:ml-6 md:flex md:space-x-8">
62
  <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
63
  <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
64
- <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
65
  <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
66
  </div>
67
  </div>
 
61
  <div class="hidden md:ml-6 md:flex md:space-x-8">
62
  <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
63
  <a href="projects.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
64
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Tasks</a>
65
  <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Calendar</a>
66
  </div>
67
  </div>