Componente Messaggi di errore
Un componente minimalista per i messaggi di errore progettato utilizzando Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Codice HTML
<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>Componenti correlati
Componente Messaggi di Errore - Dating/Social - Dark Sepia
Un complesso componente di messaggi di errore progettato per piattaforme di appuntamenti/social, caratterizzato da una combinazione di colori seppia scuro, reattività completa e supporto della modalità oscura per ridurre l'affaticamento degli occhi.
Componente Messaggi di errore
Un componente per messaggi di errore in stile glassmorphism per un cruscotto, caratterizzato da un effetto vetro smerigliato, colori complementari e un complesso design interattivo adatto per la visualizzazione dei dati e i pannelli di controllo.
Componente Messaggi di errore
Un componente del messaggio di errore con un design scheumorfico, con un'icona di avviso realistica e un bordo ombreggiato. Supporta layout reattivi e include stili distinti per la modalità oscura, garantendo leggibilità e un aspetto visivamente appropriato in diversi temi.