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
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.
Messages d’erreur Composant 45
Un composant de messages d’erreur de style rétro/vintage avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.