Componente Mensajes de éxito
Un componente responsivo que muestra mensajes de éxito en un estilo minimalista, adecuado para mostrar trabajos o productos con soporte para temas oscuros.
Código HTML
<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4">Your changes have been saved successfully. You can view them in your portfolio.</p>
<div class="flex space-x-2">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Portfolio</a>
<a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
</div>
</div>
<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-4">You have successfully submitted your form. Thank you for your submission!</p>
<div class="flex space-x-2">
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Confirmation</a>
<a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
</div>
</div>
Componentes relacionados
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.
Componente Mensajes de éxito
Un componente de mensajes de éxito receptivo diseñado para el modo oscuro con una combinación de colores vibrantes, ideal para mostrar el trabajo en un portafolio.
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.