오류 메시지 구성 요소

<div class="flex items-center justify-center min-h-screen bg-sky-50 dark:bg-gray-900 p-4 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 border-t-4 border-blue-600 dark:border-blue-500 transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="flex items-center space-x-4 mb-5">
      <svg class="h-10 w-10 text-blue-600 dark:text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h2 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white capitalize tracking-tight">
        Oops! Order Failed
      </h2>
    </div>

    <p class="text-base md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
      We're sorry, but there was an issue processing your order. Please review the details below or try again.
    </p>

    <ul class="list-none p-0 space-y-3 mb-8">
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Payment authorization failed. Your bank might have declined the transaction.</span>
      </li>
      <li class="flex items-start text-gray-800 dark:text-gray-200">
        <svg class="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-sm md:text-base">Item quantity exceeded restaurant stock for some items.</span>
      </li>
    </ul>

    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 10.59V10m5.72-.94l-2.67 2.67m0 0l2.67 2.67m-2.67-2.67H7.72" />
        </svg>
        Retry Order
      </button>
      <button type="button" class="flex-1 inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 transition duration-150 ease-in-out transform hover:scale-[1.02]">
        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-9 2v4a1 1 0 001 1h3" />
        </svg>
        Back to Home
      </button>
    </div>
  </div>
</div>