Componente Messaggi di errore
Un componente reattivo per i messaggi di errore con animazioni accattivanti per le interazioni dell'utente e che supporta il tema scuro utilizzando Tailwind CSS.
Codice HTML
<div class="max-w-lg mx-auto p-4">
<!-- Error Message Card -->
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<!-- Error Icon -->
<div class="flex items-center mb-2">
<img src="https://picsum.photos/40/40?random=1" alt="Error Icon" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Error Title</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a descriptive error message that provides more detail about the issue.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Close
</button>
</div>
<!-- Example of Multiple Error Messages -->
<div class="mt-4 space-y-4">
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">User Not Found</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">The user you are looking for might have been removed.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Retry
</button>
</div>
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Network Error</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">There seems to be a network issue, please check your connection.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Reload
</button>
</div>
</div>
</div>
Componenti correlati
Messaggio di errore immobiliare
Un componente di messaggio di errore professionale e pulito progettato per le piattaforme immobiliari, caratterizzato da una combinazione di colori monocromatica, reattività completa e supporto per la modalità oscura.
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.
Messaggio di errore minimalista in scala di grigi
Un componente minimalista e reattivo per i messaggi di errore in scala di grigi progettato per applicazioni sportive/fitness, con supporto per la modalità oscura.