Componente Mensajes de éxito
Un componente de mensajes de éxito responsivo diseñado en estilo skeuomórfico usando Tailwind CSS, que proporciona soporte para temas oscuros.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h3>
<p class="text-gray-600 dark:text-gray-400">Your action was successful. The data has been saved.</p>
</div>
</div>
<img src="https://picsum.photos/200/100?random=1" alt="Success Image" class="rounded-lg shadow-lg w-full">
<div class="mt-4">
<a href="#" class="inline-block bg-blue-500 text-white rounded-lg py-2 px-4 shadow hover:bg-blue-600 transition duration-200">View Details</a>
</div>
</div>
<!-- Dark Mode Styles -->
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>
Componentes relacionados
Componente Mensajes de éxito
Componente de mensajes de éxito con modo oscuro: cuenta con efectos responsivos y compatibilidad con temas oscuros. No se necesita código JavaScript. Para el modo oscuro, la compatibilidad con CSS es suficiente.
Skeuomorphic_Retro_Success_Message_Component
Un componente de mensaje de éxito de complejidad moderada diseñado con un estilo skeuomórfico, retro/vintage, adecuado para marcas de moda/belleza. Incluye diseño responsivo y soporte para modo oscuro.
Componente Mensajes de éxito
Un componente de mensaje de éxito simple con una combinación de colores pastel, animaciones sutiles para microinteracciones y diseño receptivo con soporte para temas oscuros. Está diseñado para que un portafolio reconozca las acciones del usuario.