CCHub Logo CCHub Tailwind Collection
Komponenten Fehlermeldungen Komponente "Fehlermeldungen"

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.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
        <h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
        <h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>

Verwandte Komponenten

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

Fehlermeldungen Komponente 45

Eine Fehlermeldungskomponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

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