Loading Overlay

                    <div class="relative p-4 max-w-md mx-auto">
  <!-- Content -->
  <div class="border border-gray-200 rounded-lg p-4 bg-white">
    <h3 class="text-lg font-medium text-gray-900 mb-2">Content Panel</h3>
    <p class="text-gray-600 mb-4">This content is currently being updated with new data. Please wait while we process your request.</p>
    <div class="flex justify-end">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition" disabled>Submit</button>
    </div>
  </div>
  
  <!-- Overlay -->
  <div class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded-lg">
    <div class="flex flex-col items-center">
      <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-3"></div>
      <p class="text-gray-700 font-medium">Loading content...</p>
    </div>
  </div>
</div>