Success Messages Component
A component that displays bold success messages with a brutalism design style, featuring high contrast, responsive effects, and dark theme support.
HTML Code
<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
</div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
</div>
</div>Related Components
Success Messages Component
A simple and clean success message component with responsive design and dark mode support.
Success Messages Component
Success Messages Component with Neumorphism design, responsive and dark theme support
Success Messages Component
A component for displaying success messages with a 3D design style, responsive effects, and dark theme support using Tailwind CSS.