SuccessMessagesComponent
Eine einfache Erfolgsnachrichtenkomponente für den E-Commerce mit einer monochromatischen Material Design-Ästhetik, einem responsiven Layout und Unterstützung für dunkle Themen.
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>Verwandte Komponenten
Komponente "Erfolgsmeldungen"
Eine einfache, künstlerische Erfolgsbotschaft mit einem sepia/braunen Farbschema, geeignet für Kryptowährungs-/Blockchain-Anwendungen. Verfügt über ein weiches, von Aquarellen inspiriertes Design, volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
Komponente "Erfolgsmeldungen"
Eine reaktionsschnelle Komponente, die Erfolgsmeldungen in einem minimalistischen Stil anzeigt und sich für die Präsentation von Arbeiten oder Produkten mit Unterstützung für dunkle Themen eignet.
Industrial_Success_Message
Eine einfache, erfolgsbotschaftskomponente im industriellen stil mit warmen neutralen tönen, die für CRM/Business-Tools entwickelt wurde und sich durch Rohstoffästhetik und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus auszeichnet.