Komponente "Fehlermeldungen"
Eine minimalistische Fehlermeldungskomponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.
HTML-Code
<div class="max-w-md mx-auto mt-8 p-4 bg-white shadow-md rounded-lg dark:bg-gray-800">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">Error Title</h2>
</div>
<p class="text-gray-700 dark:text-gray-300">This is an error message that summarizes the issue. Please check the details and try again.</p>
<div class="mt-4">
<img src="https://picsum.photos/400/200" alt="Error Illustration" class="w-full h-auto rounded-md">
</div>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
Retry
</button>
<button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700">
Dismiss
</button>
</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.
Komponente "Fehlermeldungen"
Eine Fehlermeldungskomponente im Glassmorphism-Stil mit einem dunklen Design für die geschäftliche Nutzung. Es verwendet Tailwind CSS für das Styling mit responsivem Design und interaktiven Elementen.
Komponente "Fehlermeldung"
Verfeinerte Fehlermeldungskomponente mit Skeuomorphismus, triadischem Farbschema und einem einfachen Layout. Erstellt mit Tailwind CSS für Reaktionsfähigkeit und Unterstützung des Dunkelmodus. Kein JavaScript.