CCHub Logo CCHub Tailwind Collection
Komponenten Fehlermeldungen Komponente "Fehlermeldungen"

Komponente "Fehlermeldungen"

Eine minimalistische Fehlermeldungskomponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto mt-8 p-4 bg-white shadow-md rounded-lg dark:bg-gray-800">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">Error Title</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is an error message that summarizes the issue. Please check the details and try again.</p>
    <div class="mt-4">
        <img src="https://picsum.photos/400/200" alt="Error Illustration" class="w-full h-auto rounded-md">
    </div>
    <div class="mt-4 flex justify-between">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
            Retry
        </button>
        <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700">
            Dismiss
        </button>
    </div>
</div>

Verwandte Komponenten

Komponente "Fehlermeldungen"

Eine Fehlermeldungs-Komponente, die im Brutalismus-Stil unter Verwendung eines analogen Farbschemas für eine Social-Media-Oberfläche mit einem responsiven Design und Unterstützung für dunkle Themen entworfen wurde.

Offen

Komponente "Fehlermeldungen"

Skeuomorphismus, triadisches Farbschema, komplexe Komponente für E-Commerce-Fehlermeldungen mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente mit ansprechenden Animationen für Benutzerinteraktionen und Unterstützung von Dark Themes mit Tailwind CSS.

Offen