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"

Eine reaktionsschnelle Fehlermeldungskomponente, die für den Dunkelmodus mit einem monochromatischen Farbschema entwickelt wurde. Es ist für ein Dashboard zur Visualisierung von Fehlern oder Warnungen gedacht, das interaktive Elemente wie Schaltflächen zum Schließen und Fehlersymbole enthält.

Offen

Komponente "Fehlermeldungen"

Eine reaktionsschnelle Fehlermeldungskomponente, die mit einem 3D-Stil und einem monochromatischen Farbschema entworfen wurde. Geeignet für ein Portfolio mit interaktiven Elementen zur Benutzerbindung.

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