Componente Mensajes de éxito
Un componente para mostrar mensajes de éxito con un estilo de diseño 3D, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
</div>
</div>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
</div>
</div>Componentes relacionados
Neumorphic_Charity_Success_Message
Un componente de mensaje de éxito simple y receptivo diseñado con un estilo neumórfico suave y un esquema de color monocromático, adecuado para organizaciones benéficas y sin fines de lucro. Incluye soporte para modo oscuro.
Mensaje de éxito de Memphis Pastel
Un componente de mensaje de éxito simple y receptivo con una estética de diseño de Memphis que utiliza colores pastel. Presenta formas geométricas juguetonas y admite el modo oscuro.
Componente Mensajes de éxito
Componente de mensajes de éxito receptivo con soporte de modo oscuro y estilo de glassmorphism para comercio electrónico.