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
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.