Composants Messages d’erreur Composant Messages d’erreur

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.

Aperçu

HTML Code

<div class="max-w-md mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
  <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Error Messages</h2>
  <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
      <div class="text-gray-800 dark:text-gray-200">
        <span class="font-semibold">John Doe</span>
        <span class="text-gray-500 dark:text-gray-400"> - 2 hours ago</span>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200">There was an error processing your request. Please try again later.</p>
  </div>
  <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
      <div class="text-gray-800 dark:text-gray-200">
        <span class="font-semibold">Jane Smith</span>
        <span class="text-gray-500 dark:text-gray-400"> - 1 hour ago</span>
      </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200">Invalid input! Please check your data and try again.</p>
  </div>
  <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow">Report Issue</button>
</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.

Ouvrir

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.

Ouvrir

Retro_Vintage_Error_Message_Rainbow_Gradient

Un composant de message d’erreur complexe, sur le thème rétro/vintage pour les plates-formes éducatives, avec un arrière-plan dégradé arc-en-ciel et une esthétique des années 80/90, entièrement réactif avec prise en charge du mode sombre.

Ouvrir