Composant Messages d’erreur
Schéma de couleurs triadique complexe Composant complexe de messages d’erreur de commerce électronique avec conception réactive et prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
<div class="p-6">
<div class="text-center">
<svg
class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<h3
class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
>
Order Processing Failed
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300">
We encountered an issue while processing your order. Please try
again later or contact support.
</p>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
>
Contact Support
</button>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
<div class="text-center">
<button
type="button"
class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
>
Dismiss
</button>
</div>
</div>
</div>
</div>
Composants associés
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.
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
Un composant réactif de messages d’erreur conçu pour les interfaces de réseaux sociaux, utilisant un mode sombre et un schéma de couleurs en niveaux de gris avec Tailwind CSS.