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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
</div>
<p class="text-gray-600 dark:text-gray-400 mb-4">
This is an error message that explains what went wrong. Please check your input and try again.
</p>
<div class="flex items-center justify-between mt-4">
<button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
<button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
</div>
<img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
</div>
</div>Componenti correlati
Messaggio di errore Componente - Cibo/Ristorante
Un complesso componente di messaggi di errore a tema triadico ispirato alla carta/stampa per siti Web di cibo/ristoranti, con supporto per la modalità scura e reattività completa. Presenta più elementi interattivi che simulano una stampa fisica.
Componente Messaggi di errore
Un componente reattivo per i messaggi di errore progettato con uno stile 3D e una combinazione di colori monocromatici. Adatto per un portfolio, con elementi interattivi per il coinvolgimento degli utenti.
Componente Messaggi di errore
Componente Messaggi di errore per social media con microinterazioni, combinazione di colori in scala di grigi, interfaccia complessa, design reattivo e supporto per temi scuri.