-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnojs-tailwind-dashboard.html
207 lines (207 loc) · 12.8 KB
/
nojs-tailwind-dashboard.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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Dashboard</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<style>
body {
font-family: 'Inter', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<div class="min-h-screen flex flex-col">
<header class="bg-white shadow-md">
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
<nav class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center w-full md:w-auto justify-between">
<div class="flex items-center">
<svg class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
<h1 class="ml-2 text-xl md:text-2xl lg:text-3xl font-bold text-gray-900">Analytics Dashboard</h1>
</div>
<button class="md:hidden" id="mobile-menu-button">
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="hidden md:flex items-center space-x-4 mt-4 md:mt-0" id="mobile-menu">
<button class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 w-full md:w-auto">New Project</button>
<img class="h-10 w-10 rounded-full border-2 border-indigo-600" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar">
</div>
</nav>
</div>
</header>
<main class="flex-grow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<div class="bg-white overflow-hidden shadow-lg rounded-lg transition duration-300 hover:shadow-2xl">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">
Total Users
</dt>
<dd class="text-3xl font-semibold text-gray-900">
1,284,392
</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">View all</a>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white overflow-hidden shadow-lg rounded-lg transition duration-300 hover:shadow-2xl">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-gradient-to-r from-green-400 to-green-600 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">
Revenue
</dt>
<dd class="text-3xl font-semibold text-gray-900">
$9,874,321
</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<a href="#" class="font-medium text-green-600 hover:text-green-500 transition duration-150 ease-in-out">View report</a>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white overflow-hidden shadow-lg rounded-lg transition duration-300 hover:shadow-2xl">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0 bg-gradient-to-r from-pink-500 to-red-600 rounded-md p-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">
Conversion Rate
</dt>
<dd class="text-3xl font-semibold text-gray-900">
18.7%
</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<a href="#" class="font-medium text-red-600 hover:text-red-500 transition duration-150 ease-in-out">View details</a>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-2">
<!-- Line Chart -->
<div class="bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold mb-4">Monthly Revenue</h2>
<div class="h-64 sm:h-80 bg-gray-200 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Chart placeholder</p>
</div>
</div>
<!-- Bar Chart -->
<div class="bg-white p-6 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold mb-4">User Acquisition by Channel</h2>
<div class="h-64 sm:h-80 bg-gray-200 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Chart placeholder</p>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="mt-8">
<h2 class="text-lg leading-6 font-medium text-gray-900 mb-4">Recent Activity</h2>
<ul class="divide-y divide-gray-200 bg-white shadow-md rounded-lg overflow-hidden">
<li class="px-6 py-4 hover:bg-gray-50 transition duration-150 ease-in-out">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate">
Sarah Johnson
</p>
<p class="text-sm text-gray-500 truncate">
Completed project "E-commerce Platform Upgrade"
</p>
</div>
<div class="text-sm font-semibold text-gray-900">
23m ago
</div>
</div>
</li>
<li class="px-6 py-4 hover:bg-gray-50 transition duration-150 ease-in-out">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/44.jpg" alt="">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate">
Michael Chen
</p>
<p class="text-sm text-gray-500 truncate">
Added a new task "Optimize database queries"
</p>
</div>
<div class="text-sm font-semibold text-gray-900">
1h ago
</div>
</div>
</li>
<li class="px-6 py-4 hover:bg-gray-50 transition duration-150 ease-in-out">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
<div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate">
Emily Rodriguez
</p>
<p class="text-sm text-gray-500 truncate">
Launched marketing campaign "Summer Sale 2023"
</p>
</div>
<div class="text-sm font-semibold text-gray-900">
3h ago
</div>
</div>
</li>
</ul>
</div>
</div>
</main>
<footer class="bg-white shadow-inner mt-8">
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
<p class="text-center text-gray-500 text-sm">
© 2023 Analytics Dashboard. All rights reserved. Illustrated by tanghoong
</p>
</div>
</footer>
</div>
</body>
</html>