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 del messaggio di errore
Componente del messaggio di errore perfezionato utilizzando lo scheumorfismo, la combinazione di colori triadica e un layout semplice. Realizzato con Tailwind CSS per reattività e supporto per la modalità scura. Niente JavaScript.
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
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.