Componente Messaggi di errore
Componente Messaggi di errore per i social media con supporto per la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="bg-gray-800 p-8 rounded-lg shadow-lg max-w-md w-full">
<div class="flex items-center justify-between mb-4">
<h2 class="text-2xl font-bold text-white">Error</h2>
<button class="text-gray-400 hover:text-white focus:outline-none">
<svg class="w-6 h-6" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="text-gray-300 mb-6">
<p>Oops! Something went wrong. Please try again later.</p>
<ul class="mt-4 list-disc list-inside">
<li>Check your internet connection.</li>
<li>Ensure you have the latest version of the app.</li>
<li>Contact support if the issue persists.</li>
</ul>
</div>
<div class="flex justify-end">
<button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Got it
</button>
</div>
</div>
</div>Componenti correlati
Componente Messaggi di Errore - Dating/Social - Dark Sepia
Un complesso componente di messaggi di errore progettato per piattaforme di appuntamenti/social, caratterizzato da una combinazione di colori seppia scuro, reattività completa e supporto della modalità oscura per ridurre l'affaticamento degli occhi.
Componente di errore Ludico Autunno
Un componente di messaggi di errore giocoso e allegro progettato con colori autunnali, estetica arrotondata e supporto per la modalità scura, adatto per la documentazione o i siti wiki.
Componente Messaggi di errore
Componente Messaggi di errore per social media con microinterazioni, combinazione di colori in scala di grigi, interfaccia complessa, design reattivo e supporto per temi scuri.