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.
Codice HTML
<div class="max-w-md mx-auto p-6 bg-gradient-to-br from-red-500 via-black-500 to-blue-500 text-white font-sans rounded-lg shadow-lg dark:from-red-700 dark:via-black-700 dark:to-blue-700">
<div class="flex items-center space-x-4">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<div class="text-lg font-bold">Error</div>
</div>
<div class="mt-4 text-sm">
<p>An unexpected error occurred. Please try again later.</p>
</div>
</div>Componenti correlati
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.
Componente Messaggi di errore
Componente Messaggi di errore retrò / vintage con una combinazione di colori pastello, layout complesso, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
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.