Компонент "Сообщения об ошибках"
Скевоморфизм, триадическая цветовая схема, сложная составляющая сообщений об ошибках электронной коммерции с адаптивным дизайном и поддержкой темного режима.
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>
Связанные компоненты
Компонент "Сообщения об ошибках"
Компонент отзывчивых сообщений об ошибках с привлекательной анимацией для взаимодействия с пользователем и поддержкой темной темы с использованием Tailwind CSS.
Компонент "Сообщения об ошибках"
Компонент сообщений об ошибках в стиле стекломорфизма для приборной панели с эффектом матового стекла, дополнительными цветами и сложным интерактивным дизайном, подходящим для визуализации данных и панелей управления.
Компонент "Сообщения об ошибках"
Компонент с сообщением об ошибке со скевоморфным дизайном с реалистичным значком предупреждения и затененной рамкой. Он поддерживает адаптивные макеты и включает в себя различные стили для темного режима, обеспечивая читабельность и визуально соответствующий внешний вид в различных темах.