Success Messages Component
A Success Messages Component designed in dark mode for blog/content reading. It features an analogous color scheme and is responsive.
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>Related Components
Success Messages Component
Responsive Success Messages Component with Dark Mode Support and Glassmorphism Style for E-commerce.
Neumorphic_Charity_Success_Message
A simple, responsive success message component designed with a soft neumorphic style and a monochromatic color scheme, suitable for non-profit and charity organizations. Includes dark mode support.
Success Messages Component
A simple success message component with a pastel color scheme, subtle animations for microinteractions, and responsive design with dark theme support. It's designed for a portfolio to acknowledge user actions.