Composants Messages d’alerte Composant Messages d’alerte de la Place de marché

Composant Messages d’alerte de la Place de marché

Un composant de messages d’alerte inspiré du Material Design avec des couleurs d’automne, adapté aux plateformes de marché. Dispose de différents types d’alertes (succès, avertissement, erreur, info) avec des options de rejet et la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Success Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-100 ring-1 ring-green-200 dark:ring-green-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Success! Your listing has been published.</h3>
      <p class="text-sm opacity-90">Buyers can now view and purchase your amazing product. Good luck!</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-800 dark:text-green-300 dark:hover:bg-green-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    </button>
  </div>

  <!-- Warning Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-100 ring-1 ring-yellow-200 dark:ring-yellow-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l8.601 15.354c.763 1.36-.217 3.047-1.748 3.047H1.404c-1.53 0-2.51-1.687-1.747-3.047l8.604-15.354zM11 15a1 1 0 11-2 0 1 1 0 012 0zm-1-6a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Heads up! Some listings are missing images.</h3>
      <p class="text-sm opacity-90">Listings with images tend to have higher engagement. Please update them soon.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-800 dark:text-yellow-300 dark:hover:bg-yellow-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    </button>
  </div>

  <!-- Error Alert -->
  <div class="mb-6 flex items-center p-4 rounded-lg shadow-md bg-red-100 dark:bg-red-800 text-red-800 dark:text-red-100 ring-1 ring-red-200 dark:ring-red-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-9a1 1 0 011-1h1.586l-.293-.293a1 1 0 011.414-1.414l2 2a1 1 0 010 1.414l-2 2a1 1 0 01-1.414-1.414l.293-.293H4a1 1 0 01-1-1zm11-1a1 1 0 00-1-1h-1.586l.293-.293a1 1 0 00-1.414-1.414l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414l-.293-.293H16a1 1 0 001-1z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Error! Publishing failed for item #12345.</h3>
      <p class="text-sm opacity-90">There was an issue processing your request. Please check your data and try again.</p>
    </div>
    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-800 dark:text-red-300 dark:hover:bg-red-700" aria-label="Dismiss">
      <span class="sr-only">Dismiss</span>
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    </button>
  </div>

  <!-- Info Alert with Action Button (Autumn Colors) -->
  <div class="mb-6 flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg shadow-md bg-amber-100 dark:bg-amber-800 text-amber-900 dark:text-amber-100 ring-1 ring-amber-200 dark:ring-amber-700 transition-all duration-300 ease-in-out transform hover:scale-[1.01]">
    <svg class="w-6 h-6 mr-0 sm:mr-3 mb-2 sm:mb-0 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
    <div class="flex-1">
      <h3 class="text-lg font-semibold">Important Update: Our commission rates are changing.</h3>
      <p class="text-sm opacity-90">Starting November 1st, a new commission structure will be applied to all sales. Review the details to stay informed.</p>
    </div>
    <div class="flex items-center mt-3 sm:mt-0 ml-0 sm:ml-4 flex-shrink-0">
      <button type="button" class="bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:ring-amber-300 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-amber-800 text-white font-medium rounded-lg text-sm px-4 py-2 text-center transition-colors duration-200 ease-in-out">View Details</button>
      <button type="button" class="ml-2 -mx-1.5 -my-1.5 bg-amber-100 text-amber-500 rounded-lg focus:ring-2 focus:ring-amber-400 p-1.5 hover:bg-amber-200 inline-flex h-8 w-8 dark:bg-amber-800 dark:text-amber-300 dark:hover:bg-amber-700" aria-label="Dismiss">
        <span class="sr-only">Dismiss</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
      </button>
    </div>
  </div>

</div>

Composants associés

Composant Messages d’alerte

Un composant de message d’alerte simple, réactif et en niveaux de gris pour les sites de commerce électronique, avec prise en charge du mode sombre.

Ouvrir

Retro_Alert_Messages_Component

Un composant de messages d’alerte simple et réactif avec une palette de couleurs rétro/vintage noires, blanches et néon, adapté à un tableau de bord. Inclut la prise en charge du mode sombre.

Ouvrir

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