Компоненты Сообщения об ошибках Компонент "Сообщения об ошибках"

Компонент "Сообщения об ошибках"

Компонент сообщений об ошибках в стиле glassmorphism с темной темой для использования в бизнесе. Он использует Tailwind CSS для стилизации с адаптивным дизайном и интерактивными элементами.

Предварительный просмотр

HTML-код

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-sm bg-opacity-30 p-6 max-w-md w-full">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Error Message</h2>
        <p class="text-gray-600 dark:text-gray-300">An error has occurred while processing your request. Please try again later.</p>
        <div class="flex justify-center mt-4">
            <img src="https://picsum.photos/100/100" alt="Error Image" class="rounded-full border-4 border-gray-200 dark:border-gray-700" />
        </div>
        <div class="flex flex-col items-center mt-4">
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded mb-2">Retry</button>
            <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded">Cancel</button>
        </div>
        <div class="mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full" />
                <span class="text-gray-700 dark:text-gray-300">Support Team</span>
            </div>
        </div>
    </div>
</div>

Связанные компоненты

Компонент "Сообщения об ошибках"

Этот компонент отображает сообщения об ошибках с привлекательной анимацией, которая реагирует на действия пользователя. Он включает в себя поддержку темного режима и имеет адаптивные эффекты с использованием Tailwind CSS.

Открытый

Компонент "Сообщения об ошибках"

Отзывчивый компонент сообщений об ошибках, разработанный в стиле брутализм с использованием Tailwind CSS, отличается высокой контрастностью, необычными макетами и поддержкой темного режима.

Открытый

Компонент "Сообщения об ошибках"

Компонент с сообщением об ошибке со скевоморфным дизайном с реалистичным значком предупреждения и затененной рамкой. Он поддерживает адаптивные макеты и включает в себя различные стили для темного режима, обеспечивая читабельность и визуально соответствующий внешний вид в различных темах.

Открытый