Composant Messages d’erreur
Composant pour les médias sociaux avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant d’erreur d’automne ludique
Un composant de message d’erreur ludique et joyeux conçu avec des couleurs d’automne, une esthétique arrondie et une prise en charge du mode sombre, adapté à la documentation ou aux sites wiki.
Luxury_Premium_Healthcare_Error_Message
Un composant de message d’erreur de style luxe/premium pour les applications de santé, doté d’une typographie sophistiquée, d’une palette de couleurs à contraste élevé et d’une réactivité totale avec prise en charge du mode sombre.
Retro_Vintage_Error_Message_Rainbow_Gradient
Un composant de message d’erreur complexe, sur le thème rétro/vintage pour les plates-formes éducatives, avec un arrière-plan dégradé arc-en-ciel et une esthétique des années 80/90, entièrement réactif avec prise en charge du mode sombre.