Awesome neumorphism calendar design with gradient background

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>