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
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 pour les médias sociaux avec prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Messages d’erreur
Composant réactif de messages d’erreur conçu avec un style 3D et une palette de couleurs monochromatiques. Convient à un portfolio, avec des éléments interactifs pour l’engagement de l’utilisateur.