CCHub Logo CCHub Tailwind Collection
Komponenten Fehlermeldungen Komponente "Fehlermeldungen"

Komponente "Fehlermeldungen"

Eine Fehlermeldungskomponente im Glassmorphism-Stil mit einem dunklen Design für die geschäftliche Nutzung. Es verwendet Tailwind CSS für das Styling mit responsivem Design und interaktiven Elementen.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente, die für Schnittstellen in sozialen Netzwerken entwickelt wurde und einen Dunkelmodus und ein Graustufen-Farbschema mit Tailwind CSS verwendet.

Offen

Komponente "Fehlermeldungen"

Diese Komponente zeigt Fehlermeldungen mit ansprechenden Animationen an, die auf Benutzeraktionen reagieren. Es unterstützt den Dunkelmodus und bietet reaktionsschnelle Effekte mit Tailwind CSS.

Offen

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente, die im Brutalismus-Stil mit Tailwind CSS gestaltet wurde und sich durch hohen Kontrast, ungewöhnliche Layouts und Unterstützung für den Dunkelmodus auszeichnet.

Offen