Componente Messaggi di errore
Un componente reattivo per i messaggi di errore progettato con uno stile 3D e una combinazione di colori monocromatici. Adatto per un portfolio, con elementi interattivi per il coinvolgimento degli utenti.
Codice HTML
<div class="max-w-md mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Error Messages</h2>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-gray-800 dark:text-gray-200">
<span class="font-semibold">John Doe</span>
<span class="text-gray-500 dark:text-gray-400"> - 2 hours ago</span>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">There was an error processing your request. Please try again later.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-gray-800 dark:text-gray-200">
<span class="font-semibold">Jane Smith</span>
<span class="text-gray-500 dark:text-gray-400"> - 1 hour ago</span>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">Invalid input! Please check your data and try again.</p>
</div>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow">Report Issue</button>
</div>Componenti correlati
Componente Messaggi di errore
Un componente reattivo per i messaggi di errore progettato per le interfacce di social networking, che utilizza una modalità scura e una combinazione di colori in scala di grigi con Tailwind CSS.
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.
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.