Playful_Booking_Calendar

<div class="p-4 sm:p-8 bg-purple-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 bg-purple-200 dark:bg-purple-900 flex justify-between items-center rounded-t-3xl">
      <button class="p-2 sm:p-3 rounded-full bg-purple-500 dark:bg-purple-700 text-white hover:bg-purple-600 dark:hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <h2 class="text-xl sm:text-2xl font-extrabold text-purple-900 dark:text-purple-100">November 2023</h2>
      <button class="p-2 sm:p-3 rounded-full bg-purple-500 dark:bg-purple-700 text-white hover:bg-purple-600 dark:hover:bg-purple-800 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600 transition-all duration-200 ease-in-out">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="grid grid-cols-7 text-center text-sm sm:text-base font-semibold text-purple-700 dark:text-purple-300 p-4 sm:p-6 sm:pb-4">
      <div>Sun</div>
      <div>Mon</div>
      <div>Tue</div>
      <div>Wed</div>
      <div>Thu</div>
      <div>Fri</div>
      <div>Sat</div>
    </div>

    <div class="grid grid-cols-7 gap-2 sm:gap-4 p-4 sm:p-6 pt-0">
      <!-- Placeholder for previous month's days -->
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">29</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">30</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">31</div>

      <!-- Current month's days -->
      <button aria-label="Select November 1st" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">1</button>
      <button aria-label="Select November 2nd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">2</button>
      <button aria-label="Select November 3rd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-500 dark:bg-purple-600 text-white dark:text-white transform scale-105 shadow-md transition-all duration-200 ease-in-out flex items-center justify-center text-base font-bold focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">3</button>
      <button aria-label="Select November 4th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">4</button>

      <!-- Example: Available days -->
      <button aria-label="Select November 5th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">5</button>
      <button aria-label="Select November 6th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">6</button>
      
      <!-- Example: Highlighted day with an event indicator -->
      <button aria-label="Select November 7th" class="relative p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          7
          <span class="absolute bottom-1 right-1 sm:bottom-2 sm:right-2 w-2 h-2 sm:w-2.5 sm:h-2.5 bg-purple-500 rounded-full"></span>
      </button>

      <!-- Remaining days -->
      <button aria-label="Select November 8th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">8</button>
      <button aria-label="Select November 9th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">9</button>
      <button aria-label="Select November 10th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">10</button>
      <button aria-label="Select November 11th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">11</button>

      <button aria-label="Select November 12th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">12</button>
      <button aria-label="Select November 13th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">13</button>
      <button aria-label="Select November 14th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">14</button>
      <button aria-label="Select November 15th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">15</button>
      <button aria-label="Select November 16th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">16</button>
      <button aria-label="Select November 17th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">17</button>
      <button aria-label="Select November 18th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">18</button>

      <button aria-label="Select November 19th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">19</button>
      <button aria-label="Select November 20th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">20</button>
      <button aria-label="Select November 21st" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">21</button>
      <button aria-label="Select November 22nd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">22</button>
      <button aria-label="Select November 23rd" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">23</button>
      <button aria-label="Select November 24th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">24</button>
      <button aria-label="Select November 25th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">25</button>

      <button aria-label="Select November 26th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">26</button>
      <button aria-label="Select November 27th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">27</button>
      <button aria-label="Select November 28th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">28</button>
      <button aria-label="Select November 29th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">29</button>
      <button aria-label="Select November 30th" class="p-2 sm:p-3 rounded-xl text-purple-800 dark:text-purple-200 bg-purple-100 dark:bg-purple-800 hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out flex items-center justify-center text-base font-medium focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">30</button>

      <!-- Placeholder for next month's days -->
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">1</div>
      <div class="text-purple-300 dark:text-purple-600 p-2 sm:p-3 rounded-xl flex items-center justify-center text-sm">2</div>
    </div>

    <div class="p-6 sm:p-8 pt-0">
      <h3 class="text-lg sm:text-xl font-bold text-purple-800 dark:text-purple-200 mb-4">Available Slots for Nov 3rd:</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-4">
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          9:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          10:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          11:00 AM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-500 dark:bg-purple-700 text-white font-bold transform scale-105 shadow-md transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          1:00 PM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out opacity-70 cursor-not-allowed">
          2:00 PM
        </button>
        <button class="py-2 px-3 sm:py-3 sm:px-4 rounded-xl bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 font-semibold hover:bg-purple-200 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
          3:00 PM
        </button>
      </div>
    </div>

    <div class="p-6 sm:p-8 pt-0 flex justify-end">
      <button class="py-3 px-6 sm:py-4 sm:px-8 rounded-full bg-purple-600 dark:bg-purple-700 text-white text-base sm:text-lg font-bold shadow-lg hover:bg-purple-700 dark:hover:bg-purple-800 transform hover:scale-105 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600">
        Confirm Booking
      </button>
    </div>
  </div>
</div>