SuccessMessagesComponent
A simple success message component for e-commerce, with a monochromatic Material Design aesthetic, responsive layout, and dark theme support.
HTML Code
<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>Related Components
Success Messages Component
A simple, artistic success message component with a sepia/brown color scheme, suitable for cryptocurrency/blockchain applications. Features a soft, watercolor-inspired design, full responsiveness, and dark mode support.
Art Deco Success Message
An Art Deco inspired success message component with a retro/vintage color palette, designed for entertainment/media platforms. It features geometric patterns, luxurious styling, and is fully responsive with dark mode support.
Success Messages Component
Responsive Success Messages Component with Dark Mode Support and Glassmorphism Style for E-commerce.