Toast Notifications Component
A Brutalist styled toast notifications component using Tailwind CSS, designed for a portfolio that showcases work or products. The design incorporates an analogous color scheme and supports dark mode with a complex interface.
HTML Code
<div class="fixed top-4 right-4 z-50 space-y-4">
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Notification Title</h2>
<p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
</div>
<button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Another Notification</h2>
<p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
</div>
<button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Success Notification</h2>
<p class="text-sm">Your latest action was successful. Keep up the great work!</p>
</div>
<button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
</div>Related Components
Toast Notifications Component
A simple, artistic, and colorful toast notification component for e-commerce, featuring watercolor-like soft textures and a rainbow gradient. Fully responsive with dark mode support.
Toast Notifications Component
Toast Notification Component with Glassmorphism style, Earth tones color scheme, and responsive design with dark mode support.
Toast Notifications Component
A Glassmorphism styled Toast Notifications component with pastel colors, designed for blogs and content consumption. It supports dark mode and features a rich interface with interactive elements.