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.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
<h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
<div class="my-4">
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
</div>
</div>
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
</div>
</div>
<div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
<div>
<p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
<button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente de mensajes de alerta
Un componente de mensaje de alerta de estilo retro / vintage para sitios web comerciales / corporativos, con tonos tierra y diseño receptivo con soporte para modo oscuro.
Componente de mensajes de alerta
Un componente de mensajes de alerta con estilo Glassmorphism para la visualización de datos del tablero, con efectos de vidrio esmerilado, colores complementarios y diseño receptivo con soporte para temas oscuros.