Rechercher des composants

Catégories

Composants Messages d’alerte

Messages d’alerte

Messages d’information pour informer les utilisateurs

Composant Messages d’alerte

Un composant de messages d’alerte minimaliste et dynamique pour les sites Web d’entreprise, avec un design réactif et une prise en charge du mode sombre. Il comprend différents types d’alertes telles que succès, erreur, informations et avertissement.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="mx-auto max-w-4xl space-y-6">

    <!-- Success Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-green-100 text-green-800 border border-green-200 dark:bg-green-700 dark:text-green-50 dark:border-green-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-green-600 dark:text-green-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Success! Your operation was completed.</h3>
        <p class="mt-1 text-sm">The data has been successfully saved to the cloud. You can now view the changes in your dashboard.</p>
      </div>
      <button class="p-1 rounded-full text-green-600 hover:bg-green-200 dark:text-green-50 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-red-100 text-red-800 border border-red-200 dark:bg-red-700 dark:text-red-50 dark:border-red-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-red-600 dark:text-red-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Error! Something went wrong.</h3>
        <p class="mt-1 text-sm">Failed to process your request. Please try again later or contact support if the problem persists.</p>
      </div>
      <button class="p-1 rounded-full text-red-600 hover:bg-red-200 dark:text-red-50 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Info Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-blue-100 text-blue-800 border border-blue-200 dark:bg-blue-700 dark:text-blue-50 dark:border-blue-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Information! Please note this important update.</h3>
        <p class="mt-1 text-sm">We have updated our privacy policy. Please review the new terms to continue using our services.</p>
      </div>
      <button class="p-1 rounded-full text-blue-600 hover:bg-blue-200 dark:text-blue-50 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div role="alert" class="p-4 rounded-lg shadow-md bg-yellow-100 text-yellow-800 border border-yellow-200 dark:bg-yellow-700 dark:text-yellow-50 dark:border-yellow-800 flex items-start space-x-3">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 flex-shrink-0 text-yellow-600 dark:text-yellow-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" 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.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      <div class="flex-grow">
        <h3 class="font-bold text-lg leading-tight">Warning! Your session will expire soon.</h3>
        <p class="mt-1 text-sm">You have 5 minutes left before your current session times out. Please save your work to avoid data loss.</p>
      </div>
      <button class="p-1 rounded-full text-yellow-600 hover:bg-yellow-200 dark:text-yellow-50 dark:hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

Message d’alerte Glassmorphism

Composant réactif Glassmorphism Alert Message pour un site de commerce électronique, avec prise en charge du mode sombre et un schéma de couleurs analogue, construit avec Tailwind CSS.

Ouvrir Aperçu

                <div class="relative min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Analogous Colors: Using shades of blue-green and green for a soothing feel -->
  <div class="relative w-full max-w-md bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-lg shadow-xl overflow-hidden border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700">
    <div class="absolute inset-0 bg-gradient-to-br from-green-300 to-blue-400 opacity-20 dark:from-green-700 dark:to-blue-700 dark:opacity-30 rounded-lg pointer-events-none"></div>
    
    <div class="relative p-6 md:p-8 flex items-start space-x-4">
      <!-- Icon -->
      <div class="flex-shrink-0">
        <svg class="h-8 w-8 text-green-700 dark:text-green-300" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      
      <!-- Content -->
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Order Confirmed!</h3>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed mb-4">
          Your order #12345 has been successfully placed and will be shipped within 24 hours. You will receive an email confirmation shortly.
        </p>
        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
          <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150 ease-in-out dark:bg-green-500 dark:hover:bg-green-600 dark:focus:ring-green-400">
            View Order
          </a>
          <a href="#" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
            Continue Shopping
          </a>
        </div>
      </div>

      <!-- Close Button (optional, but common for alerts) -->
      <button type="button" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</div>

Message d’alerte Glassmorphism

Composant de message d’alerte Glassmorphism avec une palette de couleurs triadique et une mise en page simple, conçu pour les portefeuilles, avec un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-6 bg-white rounded-lg shadow-lg bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30">
    <div class="absolute inset-0 rounded-lg -z-10 bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-60 dark:from-blue-700 dark:via-purple-700 dark:to-pink-700"></div>
    <div class="flex items-center space-x-4">
      <div class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white bg-blue-500 rounded-full dark:bg-blue-600">
        <svg class="w-6 h-6" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">New Portfolio Update!</h3>
        <p class="text-sm text-gray-600 dark:text-gray-200">Check out my latest projects and redesigned sections. Your feedback is highly appreciated!</p>
      </div>
    </div>
    <div class="flex justify-end mt-4">
      <button class="px-4 py-2 text-sm font-medium text-blue-800 bg-blue-100 rounded-md bg-opacity-70 dark:text-blue-200 dark:bg-blue-700 dark:bg-opacity-70">View Details</button>
      <button class="ml-2 px-4 py-2 text-sm font-medium text-gray-800 bg-gray-100 rounded-md bg-opacity-70 dark:text-gray-200 dark:bg-gray-700 dark:bg-opacity-70">Dismiss</button>
    </div>
  </div>
</div>

Composant Messages d’alerte

Ce composant est un message d’alerte avec un design minimaliste/plat, une palette de couleurs de tons de terre et une mise en page complexe. Il est conçu pour les interfaces de médias sociaux et est réactif avec la prise en charge du thème sombre. Il utilise Tailwind CSS pour le style et comprend plusieurs éléments interactifs.

Ouvrir Aperçu

                
<div class="space-y-4 p-4 max-w-md mx-auto">

  <!-- Success Alert -->
  <div class="flex items-center p-4 bg-green-100 text-green-800 rounded-lg shadow-md dark:bg-green-700 dark:text-green-100" role="alert">
    <svg class="w-6 h-6 mr-3" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Success! Your post has been shared.</div>
      <div class="text-sm">You've reached 120 new people.</div>
    </div>
    <button class="ml-auto text-green-800 dark:text-green-100 hover:text-green-600 dark:hover:text-green-300 focus:outline-none">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center p-4 bg-yellow-100 text-yellow-800 rounded-lg shadow-md dark:bg-yellow-700 dark:text-yellow-100" role="alert">
    <svg class="w-6 h-6 mr-3" 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 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.332 16c-.77 1.333.192 3 1.732 3z"></path></svg>
    <div>
      <div class="font-bold">Warning: Some images failed to upload.</div>
      <div class="text-sm">Please check your network connection.</div>
    </div>
    <button class="ml-auto text-yellow-800 dark:text-yellow-100 hover:text-yellow-600 dark:hover:text-yellow-300 focus:outline-none">
      <svg class="w-4 h-4" 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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Error Alert with Avatar -->
  <div class="flex items-start p-4 bg-red-100 text-red-800 rounded-lg shadow-md dark:bg-red-700 dark:text-red-100" role="alert">
    <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <div class="font-bold">Error: Message delivery failed.</div>
      <div class="text-sm">User

Composant Messages d’alerte

Un composant de message d’alerte de style rétro/vintage pour les sites Web d’entreprise/d’entreprise, avec des tons de terre et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto p-4">
  </div>
  
  <div class="bg-stone-200 dark:bg-stone-800 p-4 rounded-lg shadow-md mb-4 border border-stone-300 dark:border-stone-700">
    <div class="flex items-center space-x-3">
      <div class="text-amber-600 dark:text-amber-400">
        <svg class="w-6 h-6" 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 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.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
      </div>
      <div>
        <h4 class="text-stone-800 dark:text-stone-200 text-lg font-semibold">Important Update</h4>
        <p class="text-stone-600 dark:text-stone-400 text-sm">Our terms of service have been updated. Please review the changes at your earliest convenience.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end space-x-3">
      <button class="px-4 py-2 bg-stone-300 dark:bg-stone-700 text-stone-800 dark:text-stone-200 rounded-md hover:bg-stone-400 dark:hover:bg-stone-600 transition duration-300">Dismiss</button>
      <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 transition duration-300">Learn More</button>
    </div>
  </div>
  
  <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow-md mb-4 border border-green-300 dark:border-green-700">
    <div class="flex items-center space-x-3">
      <div class="text-green-700 dark:text-green-400">
        <svg class="w-6 h-6" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-green-800 dark:text-green-200 text-lg font-semibold">Success!</h4>
        <p class="text-green-600 dark:text-green-400 text-sm">Your profile has been updated successfully.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-green-300 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition duration-300">Close</button>
    </div>
  </div>

  <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow-md mb-4 border border-red-300 dark:border-red-700">
    <div class="flex items-center space-x-3">
      <div class="text-red-700 dark:text-red-400">
        <svg class="w-6 h-6" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-red-800 dark:text-red-200 text-lg font-semibold">Error Occurred</h4>
        <p class="text-red-600 dark:text-red-400 text-sm">Failed to process your request. Please try again later.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-red-300 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-400 dark:hover:bg-red-600 transition duration-300">Dismiss</button>
    </div>
  </div>

  <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg shadow-md mb-4 border border-blue-300 dark:border-blue-700">
    <div class="flex items-center space-x-3">
      <div class="text-blue-700 dark:text-blue-400">
        <svg class="w-6 h-6" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <h4 class="text-blue-800 dark:text-blue-200 text-lg font-semibold">Information</h4>
        <p class="text-blue-600 dark:text-blue-400 text-sm">You have 3 unread messages in your inbox.</p>
      </div>
    </div>
    <div class="mt-4 flex justify-end">
      <button class="px-4 py-2 bg-blue-300 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-300">View Messages</button>
    </div>
  </div>
</div>

Composant Messages d’alerte

Composant Messages d’alerte avec le style Material Design, la palette de couleurs pastel et le niveau de complexité complexe, à des fins de portefeuille. Conception réactive avec prise en charge du thème sombre. Pas besoin de code JavaScript, seulement du HTML avec des classes Tailwind. Le mode sombre utilise le préfixe dark : de Tailwind pour le coiffage. Images Utilisez picsum.photos pour les images et randomuser.me pour les avatars.

Ouvrir Aperçu

                <div class="container mx-auto p-4">
  <!-- Success Alert -->
  <div class="flex items-center bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Success! Your action was completed.</p>
  </div>

  <!-- Info Alert -->
  <div class="flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Information: This is an important message.</p>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
    <p class="text-sm">Warning: Something needs your attention.</p>
  </div>

  <!-- Danger Alert -->
  <div class="flex items-center bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded shadow-md" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94z"/></svg>
    <p class="text-sm">Error: Something went wrong.</p>
  </div>
</div>

Composant Messages d’alerte

Un composant de messages d’alerte réactif conçu dans un style minimaliste/plat avec une palette de couleurs pastel, adapté aux interfaces de médias sociaux, intégrant la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto mt-5">
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
        </div>
    </div>
</div>

Composant Messages d’alerte

Un composant de messages d’alerte skeuomorphe réactif conçu pour la consommation de blogs/contenus, avec une palette de couleurs complémentaires et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a simple alert message that mimics real-world alert styles, using complementary colors for the design.
    </p>
    <div class="mt-4 flex justify-end">
        <img src="https://picsum.photos/150/50?random" alt="Illustration" class="rounded-md shadow-md">
    </div>
</div>

Composant Messages d’alerte

Un composant de messages d’alerte réactif en mode sombre pour présenter des notifications ou des messages dans un portfolio, conçu avec des tons de terre et plusieurs éléments interactifs.

Ouvrir Aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
    <div class="my-4">
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
            </div>
        </div>
    </div>
</div>

Composant Messages d’alerte

Un composant de message d’alerte minimaliste conçu pour les blogs, avec une palette de couleurs en niveaux de gris. Il comprend un titre, un message et un bouton de fermeture. Conception réactive avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-900 rounded-md shadow-lg max-w-md mx-auto mt-6">
    <div class="flex justify-between items-center w-full">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alert Title</h2>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
            &times;
        </button>
    </div>
    <p class="mt-2 text-gray-600 dark:text-gray-400">
        This is a minimal alert message for your blog or content. It is meant to grab the reader's attention without being intrusive.
    </p>
    <div class="flex items-center mt-3">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-8 h-8 rounded-full mr-2">
        <span class="text-gray-700 dark:text-gray-300 text-sm">Posted by John Doe</span>
    </div>
    <div class="flex justify-end mt-4">
        <button class="px-4 py-2 bg-gray-800 text-white rounded-md hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">
            Action
        </button>
    </div>
</div>