Composant Messages de réussite
Il s’agit d’un composant complexe de messages de réussite inspiré du Material Design pour les applications de médias sociaux, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased">
<!-- Component Wrapper -->
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<!-- Header Section -->
<div class="bg-green-600 dark:bg-green-700 p-4 sm:p-6 flex items-center justify-between shadow-md">
<h2 class="text-xl sm:text-2xl font-bold text-white flex items-center">
<svg class="h-7 w-7 sm:h-8 sm:w-8 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="hidden sm:inline-block">Success! Your Actions are Noted</span>
<span class="sm:hidden">Success!</span>
</h2>
<button aria-label="Close success message" class="text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-600 focus:ring-white rounded-full p-1">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Main Content Area -->
<div class="p-4 sm:p-6 text-gray-700 dark:text-gray-300">
<p class="mb-6 text-lg sm:text-xl font-semibold">
Great job! Here's a quick summary of your recent successful operations.
</p>
<!-- Message Categories/Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Card 1: New Post Published -->
<div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
<div class="flex items-center mb-4">
<img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div>
<p class="font-bold text-gray-900 dark:text-white">Post Published!</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Just now</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
Your new article "Exploring the Cosmos: A Journey Through Galaxies" has been successfully published to your profile and is now visible to all your followers.
</p>
<div class="flex justify-between items-center">
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
View Post
<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<span class="text-xs text-gray-500 dark:text-gray-400">Reads: 1,234</span>
</div>
</div>
<!-- Card 2: Friend Request Accepted -->
<div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
<div class="flex items-center mb-4">
<img class="h-12 w-12 rounded-full mr-4 object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<div>
<p class="font-bold text-gray-900 dark:text-white">Friend Request Accepted!</p>
<p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
John Doe has accepted your friend request. You can now send messages and see his full activity feed.
</p>
<div class="flex justify-between items-center">
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
View Profile
<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
<span class="text-xs text-gray-500 dark:text-gray-400">Shared: 12 posts</span>
</div>
</div>
<!-- Card 3: Profile Update Saved -->
<div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
<div class="flex items-center mb-4">
<svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="font-bold text-gray-900 dark:text-white">Profile Updated!</p>
<p class="text-sm text-gray-600 dark:text-gray-400">1 hour ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
Your profile picture and bio have been successfully updated. Your new look is now live!
</p>
<div class="flex justify-between items-center">
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
Edit Profile
<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
</svg>
</a>
<span class="text-xs text-gray-500 dark:text-gray-400">Last Updated: 16:30</span>
</div>
</div>
<!-- Card 4: Event Created -->
<div class="bg-green-50 dark:bg-gray-700 rounded-lg p-5 shadow-lg transform transition duration-300 hover:scale-[1.02] hover:shadow-xl">
<div class="flex items-center mb-4">
<svg class="h-12 w-12 text-green-500 mr-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
</svg>
<div>
<p class="font-bold text-gray-900 dark:text-white">Event Created!</p>
<p class="text-sm text-gray-600 dark:text-gray-400">3 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4 line-clamp-3">
Your new event "Weekend Hiking Adventure" has been successfully created and shared with your connections.
</p>
<div class="flex justify-between items-center">
<a href="#" class="text-sm font-medium text-green-700 dark:text-green-400 hover:underline flex items-center">
Manage Event
<svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
</svg>
</a>
<span class="text-xs text-gray-500 dark:text-gray-400">Attendees: 5/20</span>
</div>
</div>
</div>
<!-- Call to Action / Footer Section -->
<div class="mt-8 flex flex-col sm:flex-row items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-6">
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4 sm:mb-0 text-center sm:text-left">Need more insights? Check your activity log.</p>
<button class="px-6 py-3 bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-full shadow-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600">
Go to Activity Log
</button>
</div>
</div>
</div>
</div>Composants associés
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.
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.
Skeuomorphic_Retro_Success_Message_Component
Un composant de message de réussite de complexité modérée conçu avec un style skeuomorphe, rétro/vintage, adapté aux marques de mode/beauté. Il comprend un design réactif et la prise en charge du mode sombre.