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 3D Design style success messages component featuring responsive effects and dark theme support, with placeholders for images and avatars.
Success Message Component - Material Design Complementary
A Material Design-styled success message component for a blog/content site, using a complementary color scheme. Responsive with dark theme support. No JavaScript.
Success Messages Component - Real Estate Dark Mode Candy Colors
A success message component for real estate platforms, designed with a dark background, cheerful candy colors (bubblegum pink, mint green), and responsiveness for all screen sizes, including dark mode support.