CCHub Logo CCHub Tailwind Collection
Composants Messages d’erreur Composant Messages d’erreur

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.

Aperçu

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 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.

Ouvrir

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.

Ouvrir

Composant Messages d’erreur

Un composant de messages d’erreur conçu avec le style Brutalism, en utilisant une palette de couleurs analogue, pour une interface de médias sociaux, avec un design réactif et une prise en charge du thème sombre.

Ouvrir