CCHub Logo CCHub Tailwind Collection
Komponenten Fehlermeldungen Komponente "Fehlermeldungen"

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.

Vorschau

HTML-Code 

<div class="bg-gray-800 text-gray-200 p-4 rounded-lg space-y-4">
    <h2 class="text-xl font-semibold mb-2">Error Messages</h2>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unable to load data</p>
            <p class="text-gray-400">Details: The data could not be retrieved at this time. Please try again later.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Network issue</p>
            <p class="text-gray-400">Details: Please check your internet connection and try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Database connection failed</p>
            <p class="text-gray-400">Details: The application is unable to connect to the database server.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Unexpected error occurred</p>
            <p class="text-gray-400">Details: Please refresh the page or contact support.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
    <div class="flex items-start bg-gray-700 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
        <div class="flex-1">
            <p class="font-medium">Error Title: Authentication failed</p>
            <p class="text-gray-400">Details: Invalid username or password. Please try again.</p>
            <button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Fehlermeldungen"

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

Offen

Komponente "Fehlermeldungen"

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

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