Composant Messages d’erreur
Un composant de messages d’erreur réactif avec des animations attrayantes pour les interactions avec l’utilisateur et prenant en charge le thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-lg mx-auto p-4">
<!-- Error Message Card -->
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<!-- Error Icon -->
<div class="flex items-center mb-2">
<img src="https://picsum.photos/40/40?random=1" alt="Error Icon" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Error Title</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a descriptive error message that provides more detail about the issue.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Close
</button>
</div>
<!-- Example of Multiple Error Messages -->
<div class="mt-4 space-y-4">
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">User Not Found</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">The user you are looking for might have been removed.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Retry
</button>
</div>
<div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
<h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Network Error</h2>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">There seems to be a network issue, please check your connection.</p>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
Reload
</button>
</div>
</div>
</div>Composants associés
Composant Messages d’erreur - CRM/Business Tools
Un composant de message d’erreur complexe et réactif conçu pour les outils CRM/Business, avec un style de typographie suisse/international épuré et minimaliste avec des couleurs vives et une prise en charge du mode sombre.
Composant Messages d’erreur
Un composant réactif de messages d’erreur utilisant les principes de Material Design, avec une palette de couleurs triadique et la prise en charge du mode sombre, adapté à un portefeuille.
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.