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 - 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.
Retro_Vintage_Error_Message_Rainbow_Gradient
Un composant de message d’erreur complexe, sur le thème rétro/vintage pour les plates-formes éducatives, avec un arrière-plan dégradé arc-en-ciel et une esthétique des années 80/90, entièrement réactif avec prise en charge du mode sombre.
Composant Messages d’erreur
Un composant de message d’erreur réactif avec des dégradés de tons de terre, des transitions douces et une prise en charge du mode sombre, adapté aux sites Web de conseil/services.