Messaggi di errore Componente 45
Un componente per i messaggi di errore in stile retrò/vintage con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 p-6 mt-5 shadow-lg">
<div class="flex items-center space-x-3">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User Avatar">
<div class="flex-1">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Error Title</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">This is a descriptive message about the error that occurred. Please take the necessary action to fix it. Thank you.</p>
</div>
</div>
<div class="mt-4 flex space-x-4">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Retry</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">Cancel</button>
</div>
<div class="mt-4">
<img class="rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Error Illustration">
</div>
</div>Componenti correlati
Memphis_Monochromatic_Error_Message
Un componente di messaggio di errore semplice e monocromatico con un'influenza del design Memphis, adatto per siti Web di eventi/conferenze. Presenta forme audaci e layout reattivo con supporto per la modalità scura.
Componente Messaggi di errore
Componente con design 3D, combinazione di colori monocromatici, complessità moderata per scopi di dashboard, design reattivo con supporto per temi scuri.
Componente Messaggi di errore
Questo componente visualizza messaggi di errore con animazioni accattivanti che rispondono alle azioni dell'utente. Include il supporto per la modalità oscura e presenta effetti reattivi utilizzando Tailwind CSS.