Composants Messages d’alerte Corporate_Professional_Alert_Messages

Corporate_Professional_Alert_Messages

Une collection de messages d’alerte propres, inspirés de la fiabilité, adaptés aux environnements d’entreprise ou de portefeuille, avec des couleurs aux tons de bijou et un design réactif avec prise en charge du mode sombre. Inclut des alertes d’information, de réussite, d’avertissement et d’erreur.

Aperçu

HTML Code

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

  <!-- Information Alert (Sapphire Blue) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-blue-600 bg-blue-50 dark:bg-blue-950 dark:border-blue-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200">Information Update</h3>
        <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">
          This is an important update regarding your portfolio analytics. New features have been added to enhance your viewing experience. <a href="#" class="font-medium underline text-blue-800 dark:text-blue-200 hover:text-blue-900 dark:hover:text-blue-100">Learn More</a>.
        </p>
      </div>
      <div class="ml-4 flex-shrink-0">
        <button type="button" class="inline-flex rounded-md p-1.5 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M6.293 6.293a1 1 0 011.414 0L10 8.586l2.293-2.293a1 1 0 111.414 1.414L11.414 10l2.293 2.293a1 1 0 01-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 01-1.414-1.414L8.586 10 6.293 7.707a1 1 0 010-1.414z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Success Alert (Emerald Green) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-green-600 bg-green-50 dark:bg-green-950 dark:border-green-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-green-700 dark:text-green-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <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" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-green-800 dark:text-green-200">Portfolio Published!</h3>
        <p class="mt-1 text-sm text-green-700 dark:text-green-300">
          Great news! Your latest portfolio piece 'Project Aurora' has been successfully published and is now live for all to see. Congratulations!
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              View Portfolio
            </button>
            <button type="button" class="ml-3 rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              Share Link
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert (Citrine/Amber) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-amber-600 bg-amber-50 dark:bg-amber-950 dark:border-amber-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-amber-700 dark:text-amber-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-200">Attention Required</h3>
        <p class="mt-1 text-sm text-amber-700 dark:text-amber-300">
          Some of your image assets are exceeding recommended file sizes. This may impact load times for your portfolio.
        </p>
      </div>
    </div>
  </div>

  <!-- Error Alert (Ruby Red) -->
  <div class="p-4 rounded-lg shadow-md border border-red-600 bg-red-50 dark:bg-red-950 dark:border-red-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-red-700 dark:text-red-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <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 flex-1">
        <h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Upload Failed</h3>
        <p class="mt-1 text-sm text-red-700 dark:text-red-300">
          There was an error uploading 'hero-banner.png'. The file type is not supported. Please try a JPG or WebP image.
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Retry Upload
            </button>
            <button type="button" class="ml-3 rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Contact Support
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Composants associés

Alerte Forêt Ludique

Un composant de messages d’alerte ludique et joyeux conçu avec une palette forêt/vert, des éléments arrondis et une esthétique conviviale, adapté aux sites Web d’entreprise/d’entreprise. Il est réactif et prend en charge le mode sombre.

Ouvrir

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

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