Rechercher des composants

Catégories

Composants Messages d’erreur

Messages d’erreur

Notifications d’erreurs ou de problèmes

Composant Messages d’erreur

Un composant de messages d’erreur de style glassmorphism pour un tableau de bord, avec un effet de verre givré, des couleurs complémentaires et un design interactif complexe adapté à la visualisation de données et aux panneaux de contrôle.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-6 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg w-full max-w-md">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Error Messages</h2>
        <div class="bg-red-500 text-white p-4 rounded-lg mb-4 flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Network Error:</p>
                <p>There was a problem connecting to the server. Please try again later.</p>
            </div>
        </div>
        <div class="bg-yellow-500 text-white p-4 rounded-lg mb-4 flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Warning:</p>
                <p>Your session will expire in 5 minutes.</p>
            </div>
        </div>
        <div class="bg-green-500 text-white p-4 rounded-lg flex items-center">
            <div class="flex-shrink-0">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            </div>
            <div class="ml-3">
                <p class="font-semibold">Success:</p>
                <p>Your changes have been saved successfully!</p>
            </div>
        </div>
    </div>
</div>

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 Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-sm bg-opacity-30 p-6 max-w-md w-full">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Error Message</h2>
        <p class="text-gray-600 dark:text-gray-300">An error has occurred while processing your request. Please try again later.</p>
        <div class="flex justify-center mt-4">
            <img src="https://picsum.photos/100/100" alt="Error Image" class="rounded-full border-4 border-gray-200 dark:border-gray-700" />
        </div>
        <div class="flex flex-col items-center mt-4">
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-semibold py-2 px-4 rounded mb-2">Retry</button>
            <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded">Cancel</button>
        </div>
        <div class="mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full" />
                <span class="text-gray-700 dark:text-gray-300">Support Team</span>
            </div>
        </div>
    </div>
</div>

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 Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-extrabold text-white mb-4">Oops! Something went wrong.</h2>
    <p class="text-lg text-gray-300 mb-6">We're sorry, but it seems there was an error processing your request. Please try again later.</p>
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="text-gray-200 font-semibold">John Doe</span>
            <span class="text-gray-500 italic">Your Friendly Bot</span>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Error Illustration">
    <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Retry</button>
    <button class="mt-2 bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded transition duration-300 ease-in-out">Contact Support</button>
</div>

Composant Messages d’erreur

Schéma de couleurs triadique complexe Composant complexe de messages d’erreur de commerce électronique avec conception réactive et prise en charge du mode sombre.

Ouvrir Aperçu

                 <div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
      <div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
        <div class="p-6">
          <div class="text-center">
            <svg
              class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <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"
              ></path>
            </svg>
            <h3
              class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
            >
              Order Processing Failed
            </h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500 dark:text-gray-300">
                We encountered an issue while processing your order. Please try
                again later or contact support.
              </p>
            </div>
          </div>
          <div class="mt-5 sm:mt-6">
            <button
              type="button"
              class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
            >
              Contact Support
            </button>
          </div>
        </div>
        <div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
          <div class="text-center">
            <button
              type="button"
              class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>

Composant Messages d’erreur

Composant de messages d’erreur avec conception 3D, schéma de couleurs monochromatique, complexité modérée pour le tableau de bord, conception réactive avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative">
    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-600 transform -skew-y-3 rotate-1 scross-y-3 rounded-3xl dark:from-purple-700 dark:to-purple-900"></div>
    <div class="relative bg-white p-10 rounded-xl shadow-2xl text-center dark:bg-gray-800">
      <h1 class="text-3xl font-bold text-red-500 dark:text-red-400">Error!</h1>
      <p class="mt-4 text-gray-700 dark:text-gray-300">Something went wrong. Please try again later.</p>
      <button class="mt-6 px-8 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-700">Retry</button>
    </div>
  </div>
</div>

Composant Messages d’erreur

Un composant de messages d’erreur réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
        <h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
        <h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>

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.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
    <div class="flex items-center mb-4">
      <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">
      This is an error message that explains what went wrong. Please check your input and try again.
    </p>
    <div class="flex items-center justify-between mt-4">
      <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
      <button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
    </div>
    <img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
  </div>
</div>

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 Aperçu

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

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 Aperçu

                <div class="max-w-lg mx-auto p-4">
    <!-- Error Message Card -->
    <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <!-- Error Icon -->
        <div class="flex items-center mb-2">
            <img src="https://picsum.photos/40/40?random=1" alt="Error Icon" class="w-10 h-10 mr-2 rounded-full" />
            <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Error Title</h2>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a descriptive error message that provides more detail about the issue.</p>
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
            Close
        </button>
    </div>
    
    <!-- Example of Multiple Error Messages -->
    <div class="mt-4 space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">User Not Found</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">The user you are looking for might have been removed.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Retry
            </button>
        </div>
        <div class="bg-white dark:bg-gray-800 border border-red-500 rounded-lg shadow-md p-4 transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 mr-2 rounded-full" />
                <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">Network Error</h2>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-4">There seems to be a network issue, please check your connection.</p>
            <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-50">
                Reload
            </button>
        </div>
    </div>
</div>

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 Aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 p-6 mt-5 shadow-lg">
    <div class="flex items-center space-x-3">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User Avatar">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Error Title</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">This is a descriptive message about the error that occurred. Please take the necessary action to fix it. Thank you.</p>
        </div>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Retry</button>
        <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">Cancel</button>
    </div>
    <div class="mt-4">
        <img class="rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Error Illustration">
    </div>
</div>