Composant Messages d’erreur
Un composant de messages d’erreur conçu avec le style Brutalism, en utilisant une palette de couleurs analogue, pour une interface de médias sociaux, avec un design réactif et une prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-extrabold text-white mb-4">Oops! Something went wrong.</h2>
<p class="text-lg text-gray-300 mb-6">We're sorry, but it seems there was an error processing your request. Please try again later.</p>
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex flex-col">
<span class="text-gray-200 font-semibold">John Doe</span>
<span class="text-gray-500 italic">Your Friendly Bot</span>
</div>
</div>
<img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Error Illustration">
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Retry</button>
<button class="mt-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded transition duration-300 ease-in-out">Contact Support</button>
</div>Composants associés
Composant Messages d’erreur
Un composant réactif de messages d’erreur conçu pour les interfaces de réseaux sociaux, utilisant un mode sombre et un schéma de couleurs en niveaux de gris avec Tailwind CSS.
Composant de message d’erreur
Amélioration du composant de message d’erreur à l’aide du skeuomorphisme, du schéma de couleurs triadique et d’une mise en page simple. Conçu avec Tailwind CSS pour la réactivité et la prise en charge du mode sombre. Pas de JavaScript.
Composant Messages d’erreur
Composant réactif de messages d’erreur conçu pour le mode sombre avec une palette de couleurs monochromatiques. Il est destiné à un tableau de bord permettant de visualiser les erreurs ou les avertissements, avec des éléments interactifs tels que des boutons de fermeture et des icônes d’erreur.