SuccessMessagesComponent
Un componente de mensaje de éxito simple para el comercio electrónico, con una estética de diseño de material monocromática, diseño receptivo y soporte de tema oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto">
<div class="text-center">
<div class="mb-4 text-green-500 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Order Confirmed!</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Your order #12345 has been successfully placed.</p>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
Continue Shopping
</button>
</div>
</div>
</div>Componentes relacionados
Componente Mensajes de éxito
Un componente de mensajes de éxito de diseño minimalista / plano para redes sociales con colores pastel claros y un diseño responsivo complejo.
Componente de mensaje de éxito - Material Design Complementary
Un componente de mensaje de éxito al estilo Material Design para un blog/sitio de contenido, que utiliza una combinación de colores complementaria. Responsivo con soporte para temas oscuros. Sin JavaScript.
Componente Mensajes de éxito
Un componente de mensajes de éxito de estilo de diseño 3D con efectos responsivos y compatibilidad con temas oscuros, con marcadores de posición para imágenes y avatares.