Components Toast Notifications Toast Notifications Component

Toast Notifications Component

A Toast Notifications component designed with Glassmorphism style, featuring responsive effects and dark theme support. It uses Tailwind CSS for styling, along with placeholder images from picsum.photos for visuals and randomuser.me for avatars.

Preview

HTML Code

<div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

Related Components

Toast Notifications Component

A responsive Toast Notifications component with Glassmorphism style and vibrant color scheme, suitable for e-commerce applications. It supports dark theme and has a complex interface with multiple interactive elements.

Open

Toast Notifications

Responsive Toast Notifications Component with Glassmorphism style for Business/Corporate websites, supporting dark theme. Pastel color scheme.

Open

Toast Notifications Component

A responsive Toast Notifications component designed with Glassmorphism, featuring a monochromatic color scheme, dark mode support, and ready for use in a portfolio.

Open