Composant Messages de réussite
Composant de messages de réussite réactifs avec prise en charge du mode sombre et style Glassmorphism pour le commerce électronique.
HTML Code
<div class="flex items-center justify-center min-h-screen p-5 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg">
<div class="text-center">
<svg class="w-16 h-16 mx-auto text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="<http://www.w3.org/2000/svg>">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h2 class="mt-5 text-2xl font-semibold text-gray-800 dark:text-white">Payment Successful!</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">Thank you for your purchase. Your order has been placed successfully.</p>
</div>
<div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
<div class="flex justify-between text-gray-700 dark:text-gray-200">
<span>Transaction ID:</span>
<span>#123456789</span>
</div>
<div class="flex justify-between mt-2 text-gray-700 dark:text-gray-200">
<span>Amount Paid:</span>
<span>$199.00</span>
</div>
</div>
<div class="mt-6">
<a href="#" class="block w-full px-4 py-2 text-center text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">View Order Details</a>
</div>
</div>
</div>Composants associés
Composant Messages de réussite
Un composant de message de réussite complexe, réactif et compatible avec les thèmes sombres pour les applications de médias sociaux, doté d’un design 3D dynamique à l’aide de Tailwind CSS. Il comprend de multiples éléments interactifs.
Composant Messages de réussite
Un composant de message de réussite minimaliste avec des effets réactifs, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.
Composant Messages de réussite
Un composant de messages de réussite réactif inspiré du Material Design avec prise en charge des tons de terre et du thème sombre, conçu pour la consommation de contenu.