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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-sm bg-opacity-30 p-6 max-w-md w-full">
<h2 class="text-xl font-bold text-gray-800 dark:text-white">Error Message</h2>
<p class="text-gray-600 dark:text-gray-300">An error has occurred while processing your request. Please try again later.</p>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/100/100" alt="Error Image" class="rounded-full border-4 border-gray-200 dark:border-gray-700" />
</div>
<div class="flex flex-col items-center mt-4">
<button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded mb-2">Retry</button>
<button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded">Cancel</button>
</div>
<div class="mt-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full" />
<span class="text-gray-700 dark:text-gray-300">Support Team</span>
</div>
</div>
</div>
</div>Composants associés
Composant Messages d’erreur
Composant de message d’erreur au design skeuomorphe, doté d’une icône d’alerte réaliste et d’une bordure ombrée. Il prend en charge les mises en page réactives et comprend des styles distincts pour le mode sombre, garantissant une lisibilité et une apparence visuellement appropriée dans différents thèmes.
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.
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.