OrganicNatureInspiredAlert
Un componente de mensajes de alerta simple y receptivo con un diseño orgánico / inspirado en la naturaleza, combinación de colores complementaria, adecuado para sitios web de consultoría / servicios. Incluye soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-blue-50 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">
<!-- Success Alert -->
<div class="mb-6 mx-auto max-w-xl bg-green-50 dark:bg-green-900 border-l-4 border-green-400 dark:border-green-600 p-4 rounded-lg shadow-md overflow-hidden relative">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-500 dark:text-green-300">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-green-800 dark:text-green-100">
Successfully updated your profile.
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-green-900 focus:ring-green-600 dark:focus:ring-green-400">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>
<!-- Decorative flowing lines -->
<div class="absolute inset-0 pointer-events-none opacity-10">
<svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
<path d="M0,50 Q50,0 100,20 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-green-400 dark:stroke-green-600"></path>
</svg>
</div>
</div>
<!-- Warning Alert -->
<div class="mb-6 mx-auto max-w-xl bg-orange-50 dark:bg-orange-900 border-l-4 border-orange-400 dark:border-orange-600 p-4 rounded-lg shadow-md overflow-hidden relative">
<div class="flex items-center">
<div class="flex-shrink-0 text-orange-500 dark:text-orange-300">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-orange-800 dark:text-orange-100">
Your session will expire in 5 minutes.
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex rounded-md p-1.5 text-orange-500 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-orange-900 focus:ring-orange-600 dark:focus:ring-orange-400">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>
<!-- Decorative flowing lines -->
<div class="absolute inset-0 pointer-events-none opacity-10">
<svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
<path d="M0,50 Q50,80 100,60 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-orange-400 dark:stroke-orange-600"></path>
</svg>
</div>
</div>
<!-- Error Alert -->
<div class="mb-6 mx-auto max-w-xl bg-red-50 dark:bg-red-900 border-l-4 border-red-400 dark:border-red-600 p-4 rounded-lg shadow-md overflow-hidden relative">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-500 dark:text-red-300">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-red-800 dark:text-red-100">
There was an error processing your request.
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex rounded-md p-1.5 text-red-500 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 dark:focus:ring-offset-red-900 focus:ring-red-600 dark:focus:ring-red-400">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>
<!-- Decorative flowing lines -->
<div class="absolute inset-0 pointer-events-none opacity-10">
<svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
<path d="M0,50 Q50,20 100,40 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-red-400 dark:stroke-red-600"></path>
</svg>
</div>
</div>
<!-- Information Alert -->
<div class="mb-6 mx-auto max-w-xl bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 dark:border-blue-600 p-4 rounded-lg shadow-md overflow-hidden relative">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-500 dark:text-blue-300">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-blue-800 dark:text-blue-100">
New service updates are available.
</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button type="button" class="inline-flex rounded-md p-1.5 text-blue-500 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-offset-blue-50 dark:focus:ring-offset-blue-900 focus:ring-blue-600 dark:focus:ring-blue-400">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" 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>
<!-- Decorative flowing lines -->
<div class="absolute inset-0 pointer-events-none opacity-10">
<svg class="w-full h-full" viewBox="0 0 200 100" preserveAspectRatio="none">
<path d="M0,50 Q50,70 100,50 T200,50" fill="none" stroke="currentColor" stroke-width="2" class="stroke-blue-400 dark:stroke-blue-600"></path>
</svg>
</div>
</div>
</div>Componentes relacionados
Componente de mensajes de alerta
Un componente de mensajes de alerta responsivos en modo oscuro para mostrar notificaciones o mensajes en un portafolio, diseñado con tonos tierra y múltiples elementos interactivos.
Componente de mensajes de alerta
Este componente es un mensaje de alerta con un diseño minimalista/plano, una combinación de colores en tonos tierra y un diseño complejo. Está diseñado para interfaces de redes sociales y es responsivo con soporte para temas oscuros. Utiliza Tailwind CSS para el estilo e incluye múltiples elementos interactivos.
Componente de mensajes de alerta de Marketplace
Un componente de mensajes de alerta inspirado en Material Design con colores otoñales, adecuado para plataformas de mercado. Cuenta con varios tipos de alertas (éxito, advertencia, error, información) con opciones descartables y soporte para modo oscuro.