Composant de message d’erreur
Amélioration du composant de message d’erreur à l’aide du skeuomorphisme, du schéma de couleurs triadique et d’une mise en page simple. Conçu avec Tailwind CSS pour la réactivité et la prise en charge du mode sombre. Pas de JavaScript.
HTML Code
<div class="max-w-md mx-auto p-6 bg-gradient-to-br from-red-500 via-black-500 to-blue-500 text-white font-sans rounded-lg shadow-lg dark:from-red-700 dark:via-black-700 dark:to-blue-700">
<div class="flex items-center space-x-4">
<svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<div class="text-lg font-bold">Error</div>
</div>
<div class="mt-4 text-sm">
<p>An unexpected error occurred. Please try again later.</p>
</div>
</div>Composants associés
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.
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.
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.