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
Ce composant affiche des messages d’erreur avec des animations attrayantes qui répondent aux actions de l’utilisateur. Il inclut la prise en charge du mode sombre et propose des effets réactifs à l’aide de Tailwind CSS.
Composant Messages d’erreur
Composant réactif de messages d’erreur conçu avec un style 3D et une palette de couleurs monochromatiques. Convient à un portfolio, avec des éléments interactifs pour l’engagement de l’utilisateur.
Message d’erreur immobilier
Un composant de message d’erreur professionnel et propre conçu pour les plateformes immobilières, avec une palette de couleurs monochromatiques, une réactivité totale et une prise en charge du mode sombre.