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
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 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 - Alimentation/Restaurant
Un composant de message d’erreur triadique complexe, inspiré du papier/de l’impression, pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et une réactivité totale. Comporte plusieurs éléments interactifs simulant une impression physique.