Composant Messages d’erreur
Composant de message d’erreur au design skeuomorphe, doté d’une icône d’alerte réaliste et d’une bordure ombrée. Il prend en charge les mises en page réactives et comprend des styles distincts pour le mode sombre, garantissant une lisibilité et une apparence visuellement appropriée dans différents thèmes.
HTML Code
<div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
<div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<!-- Skeuomorphic Error Icon -->
<svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" 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.306 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
Error Occurred
</h3>
<p class="mt-2 text-sm text-red-100 dark:text-red-200">
An unexpected error has occurred. Please try again later.
</p>
</div>
</div>
</div>Composants associés
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.
Composant Messages d’erreur - CRM/Business Tools
Un composant de message d’erreur complexe et réactif conçu pour les outils CRM/Business, avec un style de typographie suisse/international épuré et minimaliste avec des couleurs vives et une prise en charge du mode sombre.
RetroReservationErrorMessage
Un composant de message d’erreur simple, de style rétro/vintage pour les systèmes de réservation, avec des couleurs à contraste élevé et une réactivité totale avec prise en charge du mode sombre.