组件 错误消息 错误消息组件

错误消息组件

拟物化三色方案复杂电子商务错误消息组件,具有响应式设计和深色模式支持。

预览

HTML 代码

 <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
      <div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
        <div class="p-6">
          <div class="text-center">
            <svg
              class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
              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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              ></path>
            </svg>
            <h3
              class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
            >
              Order Processing Failed
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500 dark:text-gray-300">
                We encountered an issue while processing your order. Please try
                again later or contact support.
              </p>
            </div>
          </div>
          <div class="mt-5 sm:mt-6">
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
            >
              Contact Support
            </button>
          </div>
        </div>
        <div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
          <div class="text-center">
            <button
              type="button"
              class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>

相关组件

错误消息组件

具有3D设计的错误消息组件,单色配色方案,适中复杂度用于仪表板目的,响应式设计并支持深色主题。

打开

错误消息组件

一个具有拟物化设计的错误消息组件,具有逼真的警告图标和阴影边框。它支持响应式布局,并包含不同的暗黑模式样式,确保在不同主题下的可读性和视觉适宜性。

打开

错误消息组件

一个响应式错误消息组件,专为具有单色配色方案的深色模式而设计。它旨在使仪表板可视化错误或警告,其中包含交互式元素,例如关闭按钮和错误图标。

打开