CCHub Logo CCHub Tailwind Collection
Komponenten Fehlermeldungen Komponente "Fehlermeldungen"

Komponente "Fehlermeldungen"

Eine Fehlermeldungskomponente mit einem skeuomorphen Design mit einem realistischen Warnsymbol und einem schattierten Rahmen. Es unterstützt responsive Layouts und enthält unterschiedliche Stile für den Dunkelmodus, um die Lesbarkeit und ein visuell angemessenes Erscheinungsbild in verschiedenen Themen zu gewährleisten.

Vorschau

HTML-Code 

<div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
    <div class="flex items-center space-x-4">
        <div class="flex-shrink-0">
            <!-- Skeuomorphic Error Icon -->
            <svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.306 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <div>
            <h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
                Error Occurred
            </h3>
            <p class="mt-2 text-sm text-red-100 dark:text-red-200">
                An unexpected error has occurred. Please try again later.
            </p>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Fehlermeldungen" - Lebensmittel/Restaurant

Eine komplexe, von Papier/Druck inspirierte triadische Fehlermeldungskomponente für Lebensmittel-/Restaurant-Websites mit Unterstützung für den Dunkelmodus und vollständiger Reaktionsfähigkeit. Verfügt über mehrere interaktive Elemente, die einen physischen Ausdruck simulieren.

Offen

Komponente "Fehlermeldungen"

Fehlermeldungen Komponente für soziale Medien mit Mikrointeraktionen, Graustufen-Farbschema, komplexer Benutzeroberfläche, responsivem Design und Unterstützung für dunkle Themen.

Offen

Komponente "Fehlermeldungen"

Eine Fehlermeldungskomponente im Glassmorphism-Stil für ein Dashboard mit einem Milchglaseffekt, Komplementärfarben und einem komplexen interaktiven Design, das für Datenvisualisierung und Bedienfelder geeignet ist.

Offen