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
IndustrielDynamiqueGouvernementSuccèsMessage
Un composant de message de réussite conçu pour les services gouvernementaux/publics avec une esthétique industrielle, des couleurs vives et une prise en charge du mode sombre. Il présente un look brut et utilitaire avec des accents à haute saturation.
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.
Messages de réussite Composante 17
Un composant de messages de réussite audacieux et bruts conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.