Utilities Bootstrap 5Free+ CSS
Add a utility to your UI with Task Management Dashboard User Interface snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
5.3k views58 downloads
gosnippets.com/preview/task-management-dashboard-user-interface-snippets
Source Code
1<div class="task-manager">
2 <div class="left-bar">
3 <div class="upper-part">
4 <div class="actions">
5 <div class="circle"></div>
6 <div class="circle-2"></div>
7 </div>
8 </div>
9 <div class="left-content">
10 <ul class="action-list">
11 <li class="item">
12 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
13 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-inbox"
14 viewBox="0 0 24 24">
15 <path d="M22 12h-6l-2 3h-4l-2-3H2" />
16 <path
17 d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
18 </svg>
19 <span>Inbox</span>
20 </li>
21 <li class="item">
22 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
23 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
24 class="feather feather-star">
25 <polygon
26 points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
27 </svg>
28 <span> Today</span>
29 </li>
30 <li class="item">
31 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
32 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-calendar"
33 viewBox="0 0 24 24">
34 <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
35 <path d="M16 2v4M8 2v4m-5 4h18" />
36 </svg>
37 <span>Upcoming</span>
38 </li>
39 <li class="item">
40 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
41 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
42 class="feather feather-hash">
43 <line x1="4" y1="9" x2="20" y2="9" />
44 <line x1="4" y1="15" x2="20" y2="15" />
45 <line x1="10" y1="3" x2="8" y2="21" />
46 <line x1="16" y1="3" x2="14" y2="21" /></svg>
47 <span>Important</span>
48 </li>
49 <li class="item">
50 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
51 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
52 class="feather feather-users">
53 <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
54 <circle cx="9" cy="7" r="4" />
55 <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
56 <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
57 <span>Meetings</span>
58 </li>
59 <li class="item">
60 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
61 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-trash"
62 viewBox="0 0 24 24">
63 <path d="M3 6h18m-2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
64 </svg>
65 <span>Trash</span>
66 </li>
67 </ul>
68 <ul class="category-list">
69 <li class="item">
70 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
71 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
72 class="feather feather-users">
73 <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
74 <circle cx="9" cy="7" r="4" />
75 <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
76 <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
77 <span>Family</span>
78 </li>
79 <li class="item">
80 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
81 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-sun"
82 viewBox="0 0 24 24">
83 <circle cx="12" cy="12" r="5" />
84 <path
85 d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
86 </svg>
87 <span>Vacation</span>
88 </li>
89 <li class="item">
90 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
91 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
92 class="feather feather-trending-up">
93 <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
94 <polyline points="17 6 23 6 23 12" /></svg>
95 <span>Festival</span>
96 </li>
97 <li class="item">
98 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
99 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
100 class="feather feather-zap">
101 <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /></svg>
102 <span>Concerts</span>
103 </li>
104 </ul>
105 </div>
106 </div>
107 <div class="page-content">
108 <div class="header">Today Tasks</div>
109 <div class="content-categories">
110 <div class="label-wrapper">
111 <input class="nav-item" name="nav" type="radio" id="opt-1">
112 <label class="category" for="opt-1">All</label>
113 </div>
114 <div class="label-wrapper">
115 <input class="nav-item" name="nav" type="radio" id="opt-2" checked>
116 <label class="category" for="opt-2">Important</label>
117 </div>
118 <div class="label-wrapper">
119 <input class="nav-item" name="nav" type="radio" id="opt-3">
120 <label class="category" for="opt-3">Notes</label>
121 </div>
122 <div class="label-wrapper">
123 <input class="nav-item" name="nav" type="radio" id="opt-4">
124 <label class="category" for="opt-4">Links</label>
125 </div>
126 </div>
127 <div class="tasks-wrapper">
128 <div class="task">
129 <input class="task-item" name="task" type="checkbox" id="item-1" checked>
130 <label for="item-1">
131 <span class="label-text">Dashboard Design Implementation</span>
132 </label>
133 <span class="tag approved">Approved</span>
134 </div>
135 <div class="task">
136 <input class="task-item" name="task" type="checkbox" id="item-2" checked>
137 <label for="item-2">
138 <span class="label-text">Create a userflow</span>
139 </label>
140 <span class="tag progress">In Progress</span>
141 </div>
142 <div class="task">
143 <input class="task-item" name="task" type="checkbox" id="item-3">
144 <label for="item-3">
145 <span class="label-text">Application Implementation</span>
146 </label>
147 <span class="tag review">In Review</span>
148 </div>
149 <div class="task">
150 <input class="task-item" name="task" type="checkbox" id="item-4">
151 <label for="item-4">
152 <span class="label-text">Create a Dashboard Design</span>
153 </label>
154 <span class="tag progress">In Progress</span>
155 </div>
156 <div class="task">
157 <input class="task-item" name="task" type="checkbox" id="item-5">
158 <label for="item-5">
159 <span class="label-text">Create a Web Application Design</span>
160 </label>
161 <span class="tag approved">Approved</span>
162 </div>
163 <div class="task">
164 <input class="task-item" name="task" type="checkbox" id="item-6">
165 <label for="item-6">
166 <span class="label-text">Interactive Design</span>
167 </label>
168 <span class="tag review">In Review</span>
169 </div>
170 <div class="header upcoming">Upcoming Tasks</div>
171 <div class="task">
172 <input class="task-item" name="task" type="checkbox" id="item-7">
173 <label for="item-7">
174 <span class="label-text">Dashboard Design Implementation</span>
175 </label>
176 <span class="tag waiting">Waiting</span>
177 </div>
178 <div class="task">
179 <input class="task-item" name="task" type="checkbox" id="item-8">
180 <label for="item-8">
181 <span class="label-text">Create a userflow</span>
182 </label>
183 <span class="tag waiting">Waiting</span>
184 </div>
185 <div class="task">
186 <input class="task-item" name="task" type="checkbox" id="item-9">
187 <label for="item-9">
188 <span class="label-text">Application Implementation</span>
189 </label>
190 <span class="tag waiting">Waiting</span>
191 </div>
192 <div class="task">
193 <input class="task-item" name="task" type="checkbox" id="item-10">
194 <label for="item-10">
195 <span class="label-text">Create a Dashboard Design</span>
196 </label>
197 <span class="tag waiting">Waiting</span>
198 </div>
199 </div>
200 </div>
201 <div class="right-bar">
202 <div class="top-part">
203 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
204 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
205 class="feather feather-users">
206 <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
207 <circle cx="9" cy="7" r="4" />
208 <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
209 <path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>
210 <div class="count">6</div>
211 </div>
212 <div class="header">Schedule</div>
213 <div class="right-content">
214 <div class="task-box yellow">
215 <div class="description-task">
216 <div class="time">08:00 - 09:00 AM</div>
217 <div class="task-name">Product Review</div>
218 </div>
219 <div class="more-button"></div>
220 <div class="members">
221 <img
222 src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
223 alt="member">
224 <img
225 src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80"
226 alt="member-2">
227 <img
228 src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
229 alt="member-3">
230 <img
231 src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
232 alt="member-4">
233 </div>
234 </div>
235 <div class="task-box blue">
236 <div class="description-task">
237 <div class="time">10:00 - 11:00 AM</div>
238 <div class="task-name">Design Meeting</div>
239 </div>
240 <div class="more-button"></div>
241 <div class="members">
242 <img
243 src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80"
244 alt="member">
245 <img
246 src="https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
247 alt="member-2">
248 <img
249 src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
250 alt="member-3">
251 </div>
252 </div>
253 <div class="task-box red">
254 <div class="description-task">
255 <div class="time">01:00 - 02:00 PM</div>
256 <div class="task-name">Team Meeting</div>
257 </div>
258 <div class="more-button"></div>
259 <div class="members">
260 <img
261 src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
262 alt="member">
263 <img
264 src="https://images.unsplash.com/photo-1475552113915-6fcb52652ba2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80"
265 alt="member-2">
266 <img
267 src="https://images.unsplash.com/photo-1493752603190-08d8b5d1781d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
268 alt="member-3">
269 <img
270 src="https://images.unsplash.com/photo-1484688493527-670f98f9b195?ixlib=rb-1.2.1&auto=format&fit=crop&w=2230&q=80"
271 alt="member-4">
272 </div>
273 </div>
274 <div class="task-box green">
275 <div class="description-task">
276 <div class="time">03:00 - 04:00 PM</div>
277 <div class="task-name">Release Event</div>
278 </div>
279 <div class="more-button"></div>
280 <div class="members">
281 <img
282 src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80"
283 alt="member">
284 <img
285 src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80"
286 alt="member-2">
287 <img
288 src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80"
289 alt="member-3">
290 <img
291 src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80"
292 alt="member-4">
293 <img
294 src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80"
295 alt="member-5">
296 </div>
297 </div>
298 <div class="task-box blue">
299 <div class="description-task">
300 <div class="time">08:00 - 09:00 PM</div>
301 <div class="task-name">Release Event</div>
302 </div>
303 <div class="more-button"></div>
304 <div class="members">
305 <img
306 src="https://images.unsplash.com/photo-1523419409543-a5e549c1faa8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=943&q=80"
307 alt="member">
308 <img
309 src="https://images.unsplash.com/photo-1519742866993-66d3cfef4bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=881&q=80"
310 alt="member-2">
311 <img
312 src="https://images.unsplash.com/photo-1521122872341-065792fb2fa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=2208&q=80"
313 alt="member-3">
314 <img
315 src="https://images.unsplash.com/photo-1486302913014-862923f5fd48?ixlib=rb-1.2.1&auto=format&fit=crop&w=3400&q=80"
316 alt="member-4">
317 <img
318 src="https://images.unsplash.com/photo-1484187216010-59798e9cc726?ixlib=rb-1.2.1&auto=format&fit=crop&w=955&q=80"
319 alt="member-5">
320 </div>
321 </div>
322 <div class="task-box yellow">
323 <div class="description-task">
324 <div class="time">11:00 - 12:00 PM</div>
325 <div class="task-name">Practise</div>
326 </div>
327 <div class="more-button"></div>
328 <div class="members">
329 <img
330 src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
331 alt="member">
332 <img
333 src="https://images.unsplash.com/photo-1476657680631-c07285ff2581?ixlib=rb-1.2.1&auto=format&fit=crop&w=2210&q=80"
334 alt="member-2">
335 <img
336 src="https://images.unsplash.com/photo-1496345875659-11f7dd282d1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"
337 alt="member-3">
338 <img
339 src="https://images.unsplash.com/photo-1455504490126-80ed4d83b3b9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"
340 alt="member-4">
341 </div>
342 </div>
343 </div>
344 </div>
345</div>More Utilities snippets
Auto move mouse cursor snippet
Auto move mouse cursor snippet: a hand-crafted, open-source Bootstrap 5 utility. HTML, CSS & JS included, ready to copy.
UtilitiesView →
Bootstrap 5 Ecommerce Product Detail Page Design snippet
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce Product Detail Page Design snippet. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Bootstrap 5 Ecommerce single product page design template
Free Bootstrap 5 utility snippet — Bootstrap 5 Ecommerce single product page design template. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
UtilitiesView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.