E-commerce Components Component

<div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-100 dark:border-gray-700">
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">Book Your Spot</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Select your preferred date and time for a seamless experience.</p>

      <div class="mb-6">
        <label for="date-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Date</label>
        <select id="date-select" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-colors duration-200">
          <option value="">Select a Date</option>
          <option value="2023-10-26">Thursday, October 26</option>
          <option value="2023-10-27">Friday, October 27</option>
          <option value="2023-10-28">Saturday, October 28</option>
          <option value="2023-10-29">Sunday, October 29</option>
        </select>
      </div>

      <div class="mb-6">
        <label for="time-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Time</label>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            9:00 AM
            <span class="absolute top-0 right-0 -mr-1 -mt-1 w-3 h-3 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">5</span>
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            10:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/40 border-blue-500 dark:border-blue-400 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 transform scale-105 shadow-md transition-all duration-200">
            11:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            1:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 cursor-not-allowed" disabled>
            2:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            3:00 PM
          </button>
        </div>
      </div>

      <button class="w-full py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50 transition-colors duration-200 text-base uppercase tracking-wider">
        Confirm Booking
      </button>

    </div>
  </div>
</div>