Composant Messages d’erreur
Composant réactif de messages d’erreur conçu avec un style 3D et une palette de couleurs monochromatiques. Convient à un portfolio, avec des éléments interactifs pour l’engagement de l’utilisateur.
HTML Code
<div class="max-w-md mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Error Messages</h2>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-gray-800 dark:text-gray-200">
<span class="font-semibold">John Doe</span>
<span class="text-gray-500 dark:text-gray-400"> - 2 hours ago</span>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">There was an error processing your request. Please try again later.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-gray-800 dark:text-gray-200">
<span class="font-semibold">Jane Smith</span>
<span class="text-gray-500 dark:text-gray-400"> - 1 hour ago</span>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">Invalid input! Please check your data and try again.</p>
</div>
<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow">Report Issue</button>
</div>Composants associés
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.
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.
Composant Messages d’erreur
Un composant de messages d’erreur minimaliste conçu à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.