Komponente "Fehlermeldungen"
Error Messages Component für soziale Medien mit Unterstützung des Dunkelmodus unter Verwendung von Tailwind CSS.
HTML-Code
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
<div class="flex items-center justify-between mb-4">
<h2 class="text-2xl font-bold text-white">Error</h2>
<button class="text-gray-400 hover:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="text-gray-300 mb-6">
<p>Oops! Something went wrong. Please try again later.</p>
<ul class="mt-4 list-disc list-inside">
<li>Check your internet connection.</li>
<li>Ensure you have the latest version of the app.</li>
<li>Contact support if the issue persists.</li>
</ul>
</div>
<div class="flex justify-end">
<button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Got it
</button>
</div>
</div>
</div>
Verwandte Komponenten
Komponente "Fehlermeldungen"
Retro/Vintage Error Messages Component mit pastellfarbenem Farbschema, komplexem Layout, responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS.
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.
Komponente "Fehlermeldungen"
Skeuomorphismus, triadisches Farbschema, komplexe Komponente für E-Commerce-Fehlermeldungen mit responsivem Design und Unterstützung für den Dunkelmodus.