Composant Messages de réussite
Un composant de messages de réussite de style 3D avec des effets réactifs et la prise en charge du thème sombre, avec des espaces réservés pour les images et les avatars.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md w-full transform transition-transform hover:scale-105">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/60/60" alt="Avatar" class="w-14 h-14 rounded-full shadow-md">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-300">Your operation was completed successfully.</p>
</div>
</div>
<div class="mt-4 space-x-2">
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow hover:bg-blue-500 transition duration-300">Okay</a>
<a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300">Dismiss</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 messages de réussite de conception minimaliste / plate pour les médias sociaux avec des couleurs pastel claires et une mise en page réactive complexe.
Composant de message de réussite neumorphique
Un composant simple de message de réussite neumorphique avec une palette de couleurs complémentaire pour un tableau de bord, avec un design réactif et la prise en charge du mode sombre.