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"

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

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 Komponente für reaktionsschnelle Fehlermeldungen, die auf Material Design-Prinzipien basiert, mit einem triadischen Farbschema und Unterstützung für den Dunkelmodus, die auf ein Portfolio zugeschnitten ist.

Offen