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.
Código HTML
<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>
<div class="bg-gray-900 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-white font-semibold">John Doe</span>
<span class="text-gray-400 text-sm ml-2">2 minutes ago</span>
</div>
<p class="text-gray-300">Your project has been successfully submitted!</p>
</div>
<div class="bg-gray-900 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-white font-semibold">Jane Smith</span>
<span class="text-gray-400 text-sm ml-2">5 minutes ago</span>
</div>
<p class="text-gray-300">Your profile has been updated successfully!</p>
</div>
<div class="bg-gray-900 p-4 rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="text-white font-semibold">Mike Johnson</span>
<span class="text-gray-400 text-sm ml-2">10 minutes ago</span>
</div>
<p class="text-gray-300">Your order has been placed successfully!</p>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">
</div>
</div>Componentes relacionados
Componente de mensajes de éxito - Bienes raíces Modo oscuro Colores de caramelo
Un componente de mensaje de éxito para plataformas inmobiliarias, diseñado con un fondo oscuro, alegres colores caramelo (rosa chicle, verde menta) y capacidad de respuesta para todos los tamaños de pantalla, incluida la compatibilidad con el modo oscuro.
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.
Componente Mensajes de éxito
Un componente de mensaje de éxito limpio y confiable para organizaciones sin fines de lucro/benéficas, que utiliza un esquema de color púrpura/violeta. Es sensible y admite el modo oscuro.