Add a utility to your UI with Awesome neumorphism calendar design with gradient background. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<div id="app">
2 <div id="calendar-background-wrapper">
3 <div id="calendar-background"></div>
4 </div>
5 <div id="calendar">
6 <div id="calendar-dates">
7 <button id="date-2022-01-30" class="date-wrapper" disabled="">
8 <div class="date">
9 <div class="date-day">
10 <h2 class="date-day-of-month">30</h2>
11 <h2 class="date-day-of-week">Mon</h2>
12 </div>
13 </div>
14 </button>
15 <button id="date-2022-01-31" class="date-wrapper" disabled="">
16 <div class="date">
17 <div class="date-day">
18 <h2 class="date-day-of-month">31</h2>
19 <h2 class="date-day-of-week">Tue</h2>
20 </div>
21 </div>
22 </button>
23 <button id="date-2022-02-01" class="date-wrapper active-day active-month">
24 <div class="date">
25 <div class="date-day">
26 <h2 class="date-day-of-month">1</h2>
27 <h2 class="date-day-of-week">Wed</h2>
28 </div>
29 <div class="date-title">
30 <div class="date-title-dot"></div>
31 <h2>Dark Chocolate Day</h2>
32 </div>
33 </div>
34 <div class="active-day-indicator"></div>
35 </button>
36 <button id="date-2022-02-02" class="date-wrapper active-month">
37 <div class="date">
38 <div class="date-day">
39 <h2 class="date-day-of-month">2</h2>
40 <h2 class="date-day-of-week">Thu</h2>
41 </div>
42 <div class="date-title">
43 <div class="date-title-dot"></div>
44 <h2>Groundhog Day</h2>
45 </div>
46 </div>
47 </button>
48 <button id="date-2022-02-03" class="date-wrapper active-month">
49 <div class="date">
50 <div class="date-day">
51 <h2 class="date-day-of-month">3</h2>
52 <h2 class="date-day-of-week">Fri</h2>
53 </div>
54 <div class="date-title">
55 <div class="date-title-dot"></div>
56 <h2>Carrot Cake Day</h2>
57 </div>
58 </div>
59 </button>
60 <button id="date-2022-02-04" class="date-wrapper active-month">
61 <div class="date">
62 <div class="date-day">
63 <h2 class="date-day-of-month">4</h2>
64 <h2 class="date-day-of-week">Sat</h2>
65 </div>
66 <div class="date-title">
67 <div class="date-title-dot"></div>
68 <h2>Wear Red Day</h2>
69 </div>
70 </div>
71 </button>
72 <button id="date-2022-02-05" class="date-wrapper active-month">
73 <div class="date">
74 <div class="date-day">
75 <h2 class="date-day-of-month">5</h2>
76 <h2 class="date-day-of-week">Sun</h2>
77 </div>
78 <div class="date-title">
79 <div class="date-title-dot"></div>
80 <h2>Weatherperson's Day</h2>
81 </div>
82 </div>
83 </button>
84 <button id="date-2022-02-06" class="date-wrapper active-month">
85 <div class="date">
86 <div class="date-day">
87 <h2 class="date-day-of-month">6</h2>
88 <h2 class="date-day-of-week">Mon</h2>
89 </div>
90 <div class="date-title">
91 <div class="date-title-dot"></div>
92 <h2>Chopsticks Day</h2>
93 </div>
94 </div>
95 </button>
96 <button id="date-2022-02-07" class="date-wrapper active-month">
97 <div class="date">
98 <div class="date-day">
99 <h2 class="date-day-of-month">7</h2>
100 <h2 class="date-day-of-week">Tue</h2>
101 </div>
102 <div class="date-title">
103 <div class="date-title-dot"></div>
104 <h2>Periodic Table Day</h2>
105 </div>
106 </div>
107 </button>
108 <button id="date-2022-02-08" class="date-wrapper active-month">
109 <div class="date">
110 <div class="date-day">
111 <h2 class="date-day-of-month">8</h2>
112 <h2 class="date-day-of-week">Wed</h2>
113 </div>
114 <div class="date-title">
115 <div class="date-title-dot"></div>
116 <h2>Kite Flying Day</h2>
117 </div>
118 </div>
119 </button>
120 <button id="date-2022-02-09" class="date-wrapper active-month">
121 <div class="date">
122 <div class="date-day">
123 <h2 class="date-day-of-month">9</h2>
124 <h2 class="date-day-of-week">Thu</h2>
125 </div>
126 <div class="date-title">
127 <div class="date-title-dot"></div>
128 <h2>Pizza Day</h2>
129 </div>
130 </div>
131 </button>
132 <button id="date-2022-02-10" class="date-wrapper active-month">
133 <div class="date">
134 <div class="date-day">
135 <h2 class="date-day-of-month">10</h2>
136 <h2 class="date-day-of-week">Fri</h2>
137 </div>
138 <div class="date-title">
139 <div class="date-title-dot"></div>
140 <h2>Umbrella Day</h2>
141 </div>
142 </div>
143 </button>
144 <button id="date-2022-02-11" class="date-wrapper active-month">
145 <div class="date">
146 <div class="date-day">
147 <h2 class="date-day-of-month">11</h2>
148 <h2 class="date-day-of-week">Sat</h2>
149 </div>
150 <div class="date-title">
151 <div class="date-title-dot"></div>
152 <h2>Inventor's Day</h2>
153 </div>
154 </div>
155 </button>
156 <button id="date-2022-02-12" class="date-wrapper active-month">
157 <div class="date">
158 <div class="date-day">
159 <h2 class="date-day-of-month">12</h2>
160 <h2 class="date-day-of-week">Sun</h2>
161 </div>
162 <div class="date-title">
163 <div class="date-title-dot"></div>
164 <h2>Global Movie Day</h2>
165 </div>
166 </div>
167 </button>
168 <button id="date-2022-02-13" class="date-wrapper active-month">
169 <div class="date">
170 <div class="date-day">
171 <h2 class="date-day-of-month">13</h2>
172 <h2 class="date-day-of-week">Mon</h2>
173 </div>
174 <div class="date-title">
175 <div class="date-title-dot"></div>
176 <h2>Tortellini Day</h2>
177 </div>
178 </div>
179 </button>
180 <button id="date-2022-02-14" class="date-wrapper active-month">
181 <div class="date">
182 <div class="date-day">
183 <h2 class="date-day-of-month">14</h2>
184 <h2 class="date-day-of-week">Tue</h2>
185 </div>
186 <div class="date-title">
187 <div class="date-title-dot"></div>
188 <h2>Valentine's Day</h2>
189 </div>
190 </div>
191 </button>
192 <button id="date-2022-02-15" class="date-wrapper active-month">
193 <div class="date">
194 <div class="date-day">
195 <h2 class="date-day-of-month">15</h2>
196 <h2 class="date-day-of-week">Wed</h2>
197 </div>
198 <div class="date-title">
199 <div class="date-title-dot"></div>
200 <h2>Gumdrop Day</h2>
201 </div>
202 </div>
203 </button>
204 <button id="date-2022-02-16" class="date-wrapper active-month">
205 <div class="date">
206 <div class="date-day">
207 <h2 class="date-day-of-month">16</h2>
208 <h2 class="date-day-of-week">Thu</h2>
209 </div>
210 <div class="date-title">
211 <div class="date-title-dot"></div>
212 <h2>Do a Grouch a Favor Day</h2>
213 </div>
214 </div>
215 </button>
216 <button id="date-2022-02-17" class="date-wrapper active-month">
217 <div class="date">
218 <div class="date-day">
219 <h2 class="date-day-of-month">17</h2>
220 <h2 class="date-day-of-week">Fri</h2>
221 </div>
222 <div class="date-title">
223 <div class="date-title-dot"></div>
224 <h2>Cabbage Day</h2>
225 </div>
226 </div>
227 </button>
228 <button id="date-2022-02-18" class="date-wrapper active-month">
229 <div class="date">
230 <div class="date-day">
231 <h2 class="date-day-of-month">18</h2>
232 <h2 class="date-day-of-week">Sat</h2>
233 </div>
234 <div class="date-title">
235 <div class="date-title-dot"></div>
236 <h2>Battery Day</h2>
237 </div>
238 </div>
239 </button>
240 <button id="date-2022-02-19" class="date-wrapper active-month">
241 <div class="date">
242 <div class="date-day">
243 <h2 class="date-day-of-month">19</h2>
244 <h2 class="date-day-of-week">Sun</h2>
245 </div>
246 <div class="date-title">
247 <div class="date-title-dot"></div>
248 <h2>Chocolate Mint Day</h2>
249 </div>
250 </div>
251 </button>
252 <button id="date-2022-02-20" class="date-wrapper active-month">
253 <div class="date">
254 <div class="date-day">
255 <h2 class="date-day-of-month">20</h2>
256 <h2 class="date-day-of-week">Mon</h2>
257 </div>
258 <div class="date-title">
259 <div class="date-title-dot"></div>
260 <h2>Love Your Pet Day</h2>
261 </div>
262 </div>
263 </button>
264 <button id="date-2022-02-21" class="date-wrapper active-month">
265 <div class="date">
266 <div class="date-day">
267 <h2 class="date-day-of-month">21</h2>
268 <h2 class="date-day-of-week">Tue</h2>
269 </div>
270 <div class="date-title">
271 <div class="date-title-dot"></div>
272 <h2>President's Day</h2>
273 </div>
274 </div>
275 </button>
276 <button id="date-2022-02-22" class="date-wrapper active-month">
277 <div class="date">
278 <div class="date-day">
279 <h2 class="date-day-of-month">22</h2>
280 <h2 class="date-day-of-week">Wed</h2>
281 </div>
282 <div class="date-title">
283 <div class="date-title-dot"></div>
284 <h2>Cook a Sweet Potato Day</h2>
285 </div>
286 </div>
287 </button>
288 <button id="date-2022-02-23" class="date-wrapper active-month">
289 <div class="date">
290 <div class="date-day">
291 <h2 class="date-day-of-month">23</h2>
292 <h2 class="date-day-of-week">Thu</h2>
293 </div>
294 <div class="date-title">
295 <div class="date-title-dot"></div>
296 <h2>Tile Day</h2>
297 </div>
298 </div>
299 </button>
300 <button id="date-2022-02-24" class="date-wrapper active-month">
301 <div class="date">
302 <div class="date-day">
303 <h2 class="date-day-of-month">24</h2>
304 <h2 class="date-day-of-week">Fri</h2>
305 </div>
306 <div class="date-title">
307 <div class="date-title-dot"></div>
308 <h2>Toast Day</h2>
309 </div>
310 </div>
311 </button>
312 <button id="date-2022-02-25" class="date-wrapper active-month">
313 <div class="date">
314 <div class="date-day">
315 <h2 class="date-day-of-month">25</h2>
316 <h2 class="date-day-of-week">Sat</h2>
317 </div>
318 <div class="date-title">
319 <div class="date-title-dot"></div>
320 <h2>Clam Chowder Day</h2>
321 </div>
322 </div>
323 </button>
324 <button id="date-2022-02-26" class="date-wrapper active-month">
325 <div class="date">
326 <div class="date-day">
327 <h2 class="date-day-of-month">26</h2>
328 <h2 class="date-day-of-week">Sun</h2>
329 </div>
330 <div class="date-title">
331 <div class="date-title-dot"></div>
332 <h2>Pistachio Day</h2>
333 </div>
334 </div>
335 </button>
336 <button id="date-2022-02-27" class="date-wrapper active-month">
337 <div class="date">
338 <div class="date-day">
339 <h2 class="date-day-of-month">27</h2>
340 <h2 class="date-day-of-week">Mon</h2>
341 </div>
342 <div class="date-title">
343 <div class="date-title-dot"></div>
344 <h2>Polar Bear Day</h2>
345 </div>
346 </div>
347 </button>
348 <button id="date-2022-02-28" class="date-wrapper active-month">
349 <div class="date">
350 <div class="date-day">
351 <h2 class="date-day-of-month">28</h2>
352 <h2 class="date-day-of-week">Tue</h2>
353 </div>
354 <div class="date-title">
355 <div class="date-title-dot"></div>
356 <h2>Tooth Fairy Day</h2>
357 </div>
358 </div>
359 </button>
360 <button id="date-2022-03-01" class="date-wrapper" disabled="">
361 <div class="date">
362 <div class="date-day">
363 <h2 class="date-day-of-month">1</h2>
364 <h2 class="date-day-of-week">Wed</h2>
365 </div>
366 </div>
367 </button>
368 <button id="date-2022-03-02" class="date-wrapper" disabled="">
369 <div class="date">
370 <div class="date-day">
371 <h2 class="date-day-of-month">2</h2>
372 <h2 class="date-day-of-week">Thu</h2>
373 </div>
374 </div>
375 </button>
376 <button id="date-2022-03-03" class="date-wrapper" disabled="">
377 <div class="date">
378 <div class="date-day">
379 <h2 class="date-day-of-month">3</h2>
380 <h2 class="date-day-of-week">Fri</h2>
381 </div>
382 </div>
383 </button>
384 <button id="date-2022-03-04" class="date-wrapper" disabled="">
385 <div class="date">
386 <div class="date-day">
387 <h2 class="date-day-of-month">4</h2>
388 <h2 class="date-day-of-week">Sat</h2>
389 </div>
390 </div>
391 </button>
392 <button id="date-2022-03-05" class="date-wrapper" disabled="">
393 <div class="date">
394 <div class="date-day">
395 <h2 class="date-day-of-month">5</h2>
396 <h2 class="date-day-of-week">Sun</h2>
397 </div>
398 </div>
399 </button>
400 </div>
401 </div>
402</div>
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.
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.
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.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.