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 receptivo diseñado para el modo oscuro con una combinación de colores vibrantes, ideal para mostrar el trabajo en un portafolio.
Componente Mensajes de éxito
Un componente de mensajes de éxito diseñado en modo oscuro para la lectura de blogs/contenidos. Cuenta con un esquema de color análogo y es responsivo.
Skeuomorphic_Retro_Success_Message_Component
Un componente de mensaje de éxito de complejidad moderada diseñado con un estilo skeuomórfico, retro/vintage, adecuado para marcas de moda/belleza. Incluye diseño responsivo y soporte para modo oscuro.