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.
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
Composant Messages d’alerte
Un composant simple de message d’alerte de style Neumorphism pour les sites Web d’entreprise, avec des couleurs vives et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS et sans JavaScript.
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.
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.