Componente Messaggi di errore
Skeuomorphism, combinazione di colori triadica, componente complesso per i messaggi di errore dell'e-commerce con design reattivo e supporto per la modalità oscura.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
<div class="p-6">
<div class="text-center">
<svg
class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<h3
class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
>
Order Processing Failed
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300">
We encountered an issue while processing your order. Please try
again later or contact support.
</p>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
>
Contact Support
</button>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
<div class="text-center">
<button
type="button"
class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
>
Dismiss
</button>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Messaggi di errore
Un componente reattivo per i messaggi di errore che utilizza i principi di Material Design, con una combinazione di colori triadica e il supporto della modalità scura, su misura per un portfolio.
Messaggi di errore Componente 45
Un componente per i messaggi di errore in stile retrò/vintage con effetti reattivi e supporto per temi scuri, utilizzando Tailwind CSS.
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.