Composant Messages d’erreur
Un composant de messages d’erreur réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
<h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
<h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">
This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
</p>
<img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
<div class="flex justify-between items-center">
<button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
<span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
</div>
</div>Composants associés
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 réactif de messages d’erreur conçu pour le mode sombre avec une palette de couleurs monochromatiques. Il est destiné à un tableau de bord permettant de visualiser les erreurs ou les avertissements, avec des éléments interactifs tels que des boutons de fermeture et des icônes d’erreur.
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.