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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
<div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full overflow-hidden transform transition-all duration-500 hover:scale-105">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 opacity-75 rounded-3xl transform -rotate-3 translate-x-2 translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500 to-green-400 opacity-75 rounded-3xl transform rotate-3 -translate-x-2 -translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
<div class="relative z-10 flex flex-col items-center justify-center text-center">
<div class="mb-6 flex items-center justify-center space-x-2">
<div class="relative">
<img src="https://i.pravatar.cc/150?img=1" alt="Avatar 1" class="w-16 h-16 rounded-full ring-4 ring-purple-400 object-cover shadow-lg">
<span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
</div>
<div class="relative">
<img src="https://i.pravatar.cc/150?img=2" alt="Avatar 2" class="w-16 h-16 rounded-full ring-4 ring-pink-400 object-cover shadow-lg">
<span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
</div>
<div class="relative">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar 3" class="w-16 h-16 rounded-full ring-4 ring-blue-400 object-cover shadow-lg">
<span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
</div>
</div>
<h2 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">
Success!
</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6 text-lg">
Your post was successfully shared with your network. Expect lots of engagement!
</p>
<div class="w-full flex flex-col space-y-4">
<button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
View Post
</button>
<button class="w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
Share Again
</button>
</div>
<div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
<p>You've reached <span class="font-semibold text-purple-600">1,234 friends</span> this time!</p>
<div class="relative pt-1">
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-fuchsia-200 dark:bg-fuchsia-800">
<div style="width: 80%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-fuchsia-500 dark:bg-fuchsia-400"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Composants associés
Message de réussite de Memphis Pastel
Un composant de message de réussite simple et réactif avec une esthétique de design Memphis utilisant des couleurs pastel. Présente des formes géométriques ludiques et prend en charge le mode sombre.
SkeuomorphismSuccessMessage
Message de réussite du skeuomorphisme pour le tableau de bord, complexe avec couleurs complémentaires et mode sombre
Industrial_Success_Message
Un composant de message de réussite simple, de style industriel, avec des neutres chauds, conçu pour les outils CRM/Business, avec une esthétique de matière première et une réactivité totale avec prise en charge du mode sombre.