Componente Mensajes de éxito
Un componente de mensajes de éxito responsivo inspirado en Material Design con tonos tierra y soporte para temas oscuros, diseñado para el consumo de contenido.
Código HTML
<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50" alt="Success Icon" class="w-10 h-10 rounded-full mr-2">
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
Your changes have been saved successfully. You can now continue to explore the content.
</p>
<div class="mt-4">
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">Continue</button>
</div>
</div>
<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
Thanks for your submission! Stay tuned for updates regarding your content.
</p>
<div class="mt-4">
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Learn More</button>
</div>
</div>Componentes relacionados
Componente de mensaje de éxito neumórfico
Un componente simple de mensaje de éxito neumórfico con un esquema de color complementario para un tablero, con diseño receptivo y soporte de modo oscuro.
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.
Mensajes de éxito Componente 17
Un componente de mensajes de éxito audaz y crudo diseñado con Tailwind CSS con efectos responsivos y soporte para temas oscuros.