Glassmorphism アラート メッセージ

<div class="relative min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Analogous Colors: Using shades of blue-green and green for a soothing feel -->
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-lg shadow-xl overflow-hidden border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700">
    <div class="absolute inset-0 bg-gradient-to-br from-green-300 to-blue-400 opacity-20 dark:from-green-700 dark:to-blue-700 dark:opacity-30 rounded-lg pointer-events-none"></div>
    
    <div class="relative p-6 md:p-8 flex items-start space-x-4">
      <!-- Icon -->
      <div class="flex-shrink-0">
        <svg class="h-8 w-8 text-green-700 dark:text-green-300" 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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      
      <!-- Content -->
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Order Confirmed!</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">
          Your order #12345 has been successfully placed and will be shipped within 24 hours. You will receive an email confirmation shortly.
        </p>
        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-400">
            View Order
          </a>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
            Continue Shopping
          </a>
        </div>
      </div>

      <!-- Close Button (optional, but common for alerts) -->
      <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</div>