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.
HTML Code
<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 text-center max-w-md w-full">
<h2 class="text-lg font-semibold mb-2">Error Occurred</h2>
<p class="mb-4">There was a problem processing your request. Please try again later.</p>
<div class="flex items-center justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border border-gray-600 mr-3">
<span class="text-sm">John Doe</span>
</div>
<img src="https://picsum.photos/200/100?random=1" alt="Error Illustration" class="rounded-lg mb-4 w-full">
<button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Retry
</button>
</div>
</div>Composants associés
Composant Messages d’erreur
Composant avec une palette de couleurs pastel, une mise en page complexe, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
Composant Messages d’erreur
Un composant de messages d’erreur de style glassmorphism avec un thème sombre pour une utilisation professionnelle. Il utilise Tailwind CSS pour le style avec un design réactif et des éléments interactifs.