Composants Messages d’erreur Composant Messages d’erreur

Composant Messages d’erreur

Composant avec une palette de couleurs pastel, une mise en page complexe, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="relative min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="relative bg-white dark:bg-gray-800 p-10 rounded-lg shadow-xl transform transition-all sm:w-full sm:max-w-md">
    <div class="absolute top-0 right-0 -mt-4 -mr-4">
      <svg class="h-12 w-12 text-red-500 dark:text-red-400 transform rotate-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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"/>
      </svg>
    </div>
    <div class="text-center">
      <h2 class="mt-6 text-3xl font-bold text-gray-900 dark:text-white font-display">
        Oops!
      </h2>
      <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 font-body">
        Looks like something went wrong.
      </p>
    </div>
    <div class="mt-6">
      <div class="rounded-md bg-red-50 dark:bg-red-900 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400 dark:text-red-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
              We encountered an error.
            </h3>
            <div class="mt-2 text-sm text-red-700 dark:text-red-300">
              <ul role="list" class="list-disc pl-5 space-y-1">
                <li>
                  Please try again in a few minutes.
                </li>
                <li>
                  If the issue persists, contact support.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-6 text-center">
      <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300 font-body">
        Go back home
      </a>
    </div>
  </div>
</div>

Composants associés

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.

Ouvrir

Composant Messages d’erreur

Un composant de messages d’erreur de style glassmorphism avec un thème sombre pour une utilisation professionnelle. Il utilise Tailwind CSS pour le style avec un design réactif et des éléments interactifs.

Ouvrir

Composant Messages d’erreur

Un composant de messages d’erreur réactif avec des animations attrayantes pour les interactions avec l’utilisateur et prenant en charge le thème sombre à l’aide de Tailwind CSS.

Ouvrir