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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
<div class="neumorphic-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg dark:shadow-none">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-500 text-white dark:bg-green-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
</div>
<div class="flex-1">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your operation was completed successfully.</p>
</div>
</div>
</div>
</div>
<style>
.neumorphic-card {
border-radius: 1rem;
background: #e0e0e0;
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
transition: all 0.3s ease;
}
.dark .neumorphic-card {
background: #2d3748; /* dark gray */
box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
}
.neumorphic-card:hover {
box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
}
.dark .neumorphic-card:hover {
box-shadow: 4px 4px 8px #1a202c, -4px -4px 8px #4a5568;
}
</style>Componentes relacionados
Componente Mensajes de éxito
Un componente que muestra mensajes de éxito audaces con un estilo de diseño brutalista, con alto contraste, efectos responsivos y compatibilidad con temas oscuros.
IndustrialVibranteGobiernoÉxitoMensaje
Un componente de mensaje de éxito diseñado para el gobierno/servicios públicos con una estética industrial, colores vibrantes y compatibilidad con el modo oscuro. Presenta un aspecto crudo y utilitario con acentos de alta saturación.
Industrial_Success_Message
Un componente de mensaje de éxito simple, de estilo industrial, con neutros cálidos, diseñado para CRM/Business Tools, con estética de materia prima y capacidad de respuesta total con soporte para modo oscuro.