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.
Codice HTML
<div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
<div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<!-- Skeuomorphic Error Icon -->
<svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" 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.306 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
Error Occurred
</h3>
<p class="mt-2 text-sm text-red-100 dark:text-red-200">
An unexpected error has occurred. Please try again later.
</p>
</div>
</div>
</div>Componenti correlati
Componente Messaggi di errore
Un componente per i messaggi di errore progettato con lo stile Brutalismo, utilizzando una combinazione di colori analoga, per un'interfaccia di social media, con un design reattivo e il supporto del tema scuro.
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
Un componente per i messaggi di errore in stile glassmorphism con un tema scuro per uso aziendale. Utilizza Tailwind CSS per lo styling con un design reattivo ed elementi interattivi.