Componente Messaggi di errore
Un componente reattivo per i messaggi di errore progettato per la modalità scura con una combinazione di colori monocromatica. È destinato a una dashboard per visualizzare errori o avvisi, con elementi interattivi come pulsanti di chiusura e icone di errore.
Codice HTML
<div class="bg-gray-800 text-gray-200 p-4 rounded-lg space-y-4">
<h2 class="text-xl font-semibold mb-2">Error Messages</h2>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Unable to load data</p>
<p class="text-gray-400">Details: The data could not be retrieved at this time. Please try again later.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Network issue</p>
<p class="text-gray-400">Details: Please check your internet connection and try again.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Database connection failed</p>
<p class="text-gray-400">Details: The application is unable to connect to the database server.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Unexpected error occurred</p>
<p class="text-gray-400">Details: Please refresh the page or contact support.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
<div class="flex items-start bg-gray-700 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
<div class="flex-1">
<p class="font-medium">Error Title: Authentication failed</p>
<p class="text-gray-400">Details: Invalid username or password. Please try again.</p>
<button class="mt-2 bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded">Dismiss</button>
</div>
</div>
</div>Componenti correlati
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.
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.