Success Messages Component
A component for displaying success messages with a 3D design style, responsive effects, and dark theme support using Tailwind CSS.
HTML Code
<div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
</div>
</div>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
</div>
</div>Related Components
Success Messages Component
A responsive success messages component designed in skeuomorphic style using Tailwind CSS, providing dark theme 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.
Success Messages Component
A simple, artistic success message component with a sepia/brown color scheme, suitable for cryptocurrency/blockchain applications. Features a soft, watercolor-inspired design, full responsiveness, and dark mode support.