Tailwind Month Calendar Date Picker

<div class="ring-1 ring-white/10 bg-white/5 rounded-xl pt-4 pr-4 pb-4 pl-4">
      <div class="grid grid-cols-7 text-center text-xs text-slate-400 mb-2">
        <div class="">Su</div><div class="">Mo</div><div>Tu</div><div>We</div><div class="">Th</div><div>Fr</div><div class="">Sa</div>
      </div>
      <div class="grid grid-cols-7 gap-1 text-sm" id="calendar-grid" aria-live="polite"><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-07-27" role="button" aria-label="Sun Jul 27 2025">27</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-07-28" role="button" aria-label="Mon Jul 28 2025">28</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-07-29" role="button" aria-label="Tue Jul 29 2025">29</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-07-30" role="button" aria-label="Wed Jul 30 2025">30</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-07-31" role="button" aria-label="Thu Jul 31 2025">31</div><div class="h-9 flex items-center justify-center" data-date="2025-08-01" role="button" aria-label="Fri Aug 01 2025">1</div><div class="h-9 flex items-center justify-center" data-date="2025-08-02" role="button" aria-label="Sat Aug 02 2025">2</div><div class="h-9 flex items-center justify-center" data-date="2025-08-03" role="button" aria-label="Sun Aug 03 2025">3</div><div class="h-9 flex items-center justify-center" data-date="2025-08-04" role="button" aria-label="Mon Aug 04 2025">4</div><div class="h-9 flex items-center justify-center" data-date="2025-08-05" role="button" aria-label="Tue Aug 05 2025">5</div><div class="h-9 flex items-center justify-center" data-date="2025-08-06" role="button" aria-label="Wed Aug 06 2025">6</div><div class="h-9 flex items-center justify-center" data-date="2025-08-07" role="button" aria-label="Thu Aug 07 2025">7</div><div class="h-9 flex items-center justify-center" data-date="2025-08-08" role="button" aria-label="Fri Aug 08 2025">8</div><div class="h-9 flex items-center justify-center" data-date="2025-08-09" role="button" aria-label="Sat Aug 09 2025">9</div><div class="h-9 flex items-center justify-center" data-date="2025-08-10" role="button" aria-label="Sun Aug 10 2025">10</div><div class="h-9 flex items-center justify-center" data-date="2025-08-11" role="button" aria-label="Mon Aug 11 2025">11</div><div class="h-9 flex items-center justify-center" data-date="2025-08-12" role="button" aria-label="Tue Aug 12 2025">12</div><div class="h-9 flex items-center justify-center" data-date="2025-08-13" role="button" aria-label="Wed Aug 13 2025">13</div><div class="h-9 flex items-center justify-center" data-date="2025-08-14" role="button" aria-label="Thu Aug 14 2025">14</div><div class="h-9 flex items-center justify-center" data-date="2025-08-15" role="button" aria-label="Fri Aug 15 2025">15</div><div class="h-9 flex items-center justify-center" data-date="2025-08-16" role="button" aria-label="Sat Aug 16 2025">16</div><div class="h-9 flex items-center justify-center" data-date="2025-08-17" role="button" aria-label="Sun Aug 17 2025">17</div><div class="h-9 flex items-center justify-center" data-date="2025-08-18" role="button" aria-label="Mon Aug 18 2025">18</div><div class="h-9 flex items-center justify-center" data-date="2025-08-19" role="button" aria-label="Tue Aug 19 2025"><div class="h-7 w-7 rounded-lg bg-violet-500 text-white flex items-center justify-center shadow-inner shadow-violet-900/40">19</div></div><div class="h-9 flex items-center justify-center" data-date="2025-08-20" role="button" aria-label="Wed Aug 20 2025">20</div><div class="h-9 flex items-center justify-center" data-date="2025-08-21" role="button" aria-label="Thu Aug 21 2025">21</div><div class="h-9 flex items-center justify-center" data-date="2025-08-22" role="button" aria-label="Fri Aug 22 2025">22</div><div class="h-9 flex items-center justify-center" data-date="2025-08-23" role="button" aria-label="Sat Aug 23 2025">23</div><div class="h-9 flex items-center justify-center" data-date="2025-08-24" role="button" aria-label="Sun Aug 24 2025">24</div><div class="h-9 flex items-center justify-center" data-date="2025-08-25" role="button" aria-label="Mon Aug 25 2025">25</div><div class="h-9 flex items-center justify-center" data-date="2025-08-26" role="button" aria-label="Tue Aug 26 2025">26</div><div class="h-9 flex items-center justify-center" data-date="2025-08-27" role="button" aria-label="Wed Aug 27 2025">27</div><div class="h-9 flex items-center justify-center" data-date="2025-08-28" role="button" aria-label="Thu Aug 28 2025">28</div><div class="h-9 flex items-center justify-center" data-date="2025-08-29" role="button" aria-label="Fri Aug 29 2025">29</div><div class="h-9 flex items-center justify-center" data-date="2025-08-30" role="button" aria-label="Sat Aug 30 2025">30</div><div class="h-9 flex items-center justify-center" data-date="2025-08-31" role="button" aria-label="Sun Aug 31 2025">31</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-09-01" role="button" aria-label="Mon Sep 01 2025">1</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-09-02" role="button" aria-label="Tue Sep 02 2025">2</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-09-03" role="button" aria-label="Wed Sep 03 2025">3</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-09-04" role="button" aria-label="Thu Sep 04 2025">4</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-09-05" role="button" aria-label="Fri Sep 05 2025">5</div><div class="h-9 flex items-center justify-center text-slate-600" data-date="2025-09-06" role="button" aria-label="Sat Sep 06 2025">6</div></div>
    </div>