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
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 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 Messages de réussite
Un composant de messages de réussite réactif conçu dans un style skeuomorphique à l’aide de Tailwind CSS, fournissant la prise en charge des thèmes sombres.