Composant Messages de réussite
Un composant de messages de réussite conçu en mode sombre pour la lecture de blogs/contenus. Il présente une palette de couleurs analogue et est réactif.
HTML Code
<div class="bg-gray-900 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg">
<h2 class="text-xl font-semibold mb-4">Success!</h2>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-medium">John Doe</p>
<p class="text-sm text-gray-400">a moment ago</p>
</div>
</div>
<p class="mb-4">Your changes have been saved successfully!</p>
<img src="https://picsum.photos/seed/success/400/200" alt="Success Image" class="rounded-lg mb-4" />
<button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
View Details
</button>
</div>
<div class="bg-gray-800 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
<h2 class="text-xl font-semibold mb-4">Success!</h2>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-medium">Jane Smith</p>
<p class="text-sm text-gray-400">a few moments ago</p>
</div>
</div>
<p class="mb-4">Your email has been verified successfully!</p>
<img src="https://picsum.photos/seed/email_verified/400/200" alt="Email Verification Image" class="rounded-lg mb-4" />
<button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
Check Inbox
</button>
</div>
<div class="bg-gray-700 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
<h2 class="text-xl font-semibold mb-4">Success!</h2>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-medium">Michael Brown</p>
<p class="text-sm text-gray-400">just now</p>
</div>
</div>
<p class="mb-4">Your profile picture has been updated!</p>
<img src="https://picsum.photos/seed/profile_update/400/200" alt="Profile Update Image" class="rounded-lg mb-4" />
<button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
View Profile
</button>
</div>Composants associés
Composant Message de Réussite - Conception Matérielle Complémentaire
Un composant de message de réussite de style Material Design pour un blog/site de contenu, utilisant une palette de couleurs complémentaire. Réactif avec prise en charge du thème sombre. Pas de JavaScript.
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 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.