Componente Mensajes de éxito
Un componente de mensajes de éxito responsivo con elementos de diseño 3D y soporte para temas oscuros, utilizando Tailwind CSS.
Código HTML
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 dark:shadow-2xl">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full mr-3 shadow-md" />
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-200">Success Message Title</h2>
</div>
<p class="text-gray-600 dark:text-gray-400">
Your operation was successful! This message confirms that your changes were saved properly.
</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Success Illustration" class="w-full h-auto rounded-lg shadow-md" />
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: #1F2937;
}
.dark\:text-gray-200 {
color: #E5E7EB;
}
.dark\:text-gray-400 {
color: #9CA3AF;
}
.dark\:shadow-2xl {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
}
</style>Componentes relacionados
Componente Mensajes de éxito
Un componente de mensaje de éxito simple y limpio con diseño receptivo y soporte para modo oscuro.
Componente Mensajes de éxito
Un componente de mensaje de éxito minimalista con efectos responsivos, que admite temas claros y oscuros utilizando 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.