Composant SuccessMessagesComponent
Un composant de message de réussite simple pour le commerce électronique, avec une esthétique monochromatique de Material Design, une mise en page réactive et une prise en charge du thème sombre.
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>Composants associés
Composant Messages de réussite
Un composant qui affiche des messages de réussite audacieux avec un style de conception brutal, avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre.
Composant Messages de réussite
Un composant de message de réussite simple et propre avec un design réactif et une prise en charge du mode sombre.
SkeuomorphismSuccessMessage
Message de réussite du skeuomorphisme pour le tableau de bord, complexe avec couleurs complémentaires et mode sombre