Componente Messaggi di errore
Un componente reattivo per i messaggi di errore progettato in stile brutalismo utilizzando Tailwind CSS, con contrasto elevato, layout insoliti e supporto per la modalità scura.
Codice HTML
<div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
<h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
<h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>Componenti correlati
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
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 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.