<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 transition-opacity">
 <div class="relative bg-gray-900/80 backdrop-blur-xl rounded-2xl border border-gray-800 shadow-2xl w-full max-w-lg transform transition-all duration-300 scale-95 hover:scale-100 md:w-[28rem]">
  <div class="p-6 space-y-4">
   <div class="flex justify-between items-center">
    <h3 class="text-xl font-semibold text-cyan-400">
     Confirmation Required
    </h3>
    <button class="p-2 rounded-full hover:bg-gray-800 transition-colors">
     <span class="text-2xl">
      ×
     </span>
    </button>
   </div>
   <div class="space-y-2 text-gray-300">
    <p>
     Are you sure you want to perform this action? This operation cannot be undone.
    </p>
   </div>
   <div class="flex gap-3 pt-4">
    <button class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white font-medium transition-all transform hover:scale-[1.02]">
     Confirm
    </button>
    <button class="px-5 py-2.5 rounded-lg border border-gray-700 hover:border-cyan-500/50 text-gray-300 hover:text-cyan-400 transition-colors">
     Cancel
    </button>
   </div>
  </div>
  <div class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center">
   <div class="animate-spin">
    🌀
   </div>
  </div>
  <div class="h-1.5 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-b-2xl opacity-80">
  </div>
 </div>
</div>

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
 <div class="@click-outside relative flex h-[90vh] max-w-7xl flex-col rounded-3xl bg-gradient-to-br from-blue-500/20 to-white shadow-2xl transition-all duration-200 sm:w-11/12 md:w-8/12 lg:w-1/3">
  <div class="flex items-center justify-between rounded-t-3xl bg-blue-500 px-8 py-6 shadow-md">
   <h2 class="text-2xl font-semibold text-white">
    Modal Title
   </h2>
   <button class="rounded-full p-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
    ×
   </button>
  </div>
  <div class="grid flex-1 grid-cols-1 gap-6 overflow-y-auto p-8 md:grid-cols-2">
   <div class="space-y-4">
    <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
     📁
    </div>
    <div class="h-24 rounded-lg bg-gray-100 p-4 hover:scale-105">
     📊
    </div>
   </div>
   <div class="space-y-6">
    <div class="rounded-lg bg-white p-6 shadow-md">
     <p class="text-sm text-gray-700">
      Configuration settings and additional information panel for user interactions.
     </p>
    </div>
    <div class="rounded-lg bg-white p-6 shadow-md">
     <p class="text-sm text-gray-700">
      Interactive elements section with dynamic content loading capabilities.
     </p>
    </div>
   </div>
  </div>
  <div class="flex justify-end gap-4 border-t border-blue-100 bg-gray-50 px-8 py-4">
   <button class="rounded-lg bg-gray-100 px-6 py-2 text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400">
    Cancel
   </button>
   <button class="rounded-lg bg-blue-500 px-6 py-2 text-white hover:bg-blue-600 disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-blue-400" disabled="">
    Confirm
   </button>
  </div>
 </div>
</div>

<div class="fixed bottom-6 right-6 z-50">
 <button class="bg-[#42D392] hover:bg-[#3AB882] text-[#0A1A2F] px-6 py-3 rounded-full shadow-2xl transform transition-all duration-300 hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#42D392]/50">
  Open Modal
 </button>
</div>
<div class="fixed inset-0 z-50 bg-[#0A1A2F]/90 backdrop-blur-sm hidden transition-opacity duration-300 ease-out" id="overlay">
 <div class="absolute top-4 right-4">
  <button class="text-[#A7B6C2] hover:text-[#42D392] transition-colors duration-200" id="closeBtn">
   <svg class="w-8 h-8" fill="none" stroke="currentColor" viewbox="0 0 24 24">
    <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    </path>
   </svg>
  </button>
 </div>
 <div class="flex items-center justify-center min-h-screen max-w-md mx-auto px-4">
  <div class="bg-[#2D3748] rounded-xl shadow-2xl transform transition-all duration-300 ease-out w-full overflow-hidden">
   <div class="p-6 md:px-8 lg:px-10 space-y-6">
    <div class="text-[#FFD700] text-2xl font-bold">
     Confirmation
    </div>
    <p class="text-[#A7B6C2] leading-relaxed">
     Are you sure you want to perform this action?
    </p>
    <div class="flex gap-4">
     <button class="bg-[#FF6B35] hover:bg-[#E55A28] text-white px-5 py-2.5 rounded-lg flex-1 transition-colors duration-200">
      Confirm
     </button>
     <button class="border border-[#6B7A8F] hover:border-[#42D392] text-[#A7B6C2] hover:text-[#42D392] px-5 py-2.5 rounded-lg flex-1 transition-all duration-200" id="cancelBtn">
      Cancel
     </button>
    </div>
   </div>
   <div class="h-1 bg-gradient-to-r from-[#42D392] to-[#0A1A2F] opacity-80">
   </div>
  </div>
 </div>
</div>
<script>
 document.querySelector('button').addEventListener('click', () => {
    document.getElementById('overlay').classList.remove('hidden');
    document.getElementById('overlay').classList.add('flex');
  });

  document.getElementById('closeBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });

  document.getElementById('cancelBtn').addEventListener('click', () => {
    document.getElementById('overlay').classList.add('hidden');
  });
</script>