Corporate_Professional_Alert_Messages
Una colección de mensajes de alerta limpios e inspirados en la confiabilidad, adecuados para entornos comerciales o de cartera, con colores en tono joya y un diseño receptivo con soporte para modo oscuro. Incluye alertas informativas, de éxito, de advertencia y de error.
Código HTML
<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>
Componentes relacionados
Componente de mensajes de alerta
Componente de mensaje de alerta receptivo con microinteracciones, combinación de colores pastel, diseño complejo, propósito comercial / corporativo, compatibilidad con modo oscuro y sin JavaScript.
Componente de mensajes de alerta
Un componente de mensaje de alerta en escala de grises simple, receptivo para sitios de comercio electrónico, con soporte para modo oscuro.
Mensaje de alerta de glassmorphism
Componente de mensaje de alerta de Glassmorphism con un esquema de color triádico y un diseño simple, diseñado para carteras, con diseño receptivo y soporte de modo oscuro.