Компоненты Всплывающие уведомления Компонент всплывающих уведомлений

Компонент всплывающих уведомлений

Компонент всплывающих уведомлений в стиле Brutalist, использующий Tailwind CSS, предназначенный для портфолио, демонстрирующего работу или продукты. Дизайн включает в себя аналогичную цветовую гамму и поддерживает темный режим со сложным интерфейсом.

Предварительный просмотр

HTML-код

<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>

Связанные компоненты

Компонент всплывающих уведомлений

Отзывчивый компонент всплывающих уведомлений со скевоморфным дизайном и поддержкой темного режима, созданный с помощью Tailwind CSS.

Открытый

Компонент всплывающих уведомлений

Компонент всплывающих уведомлений, разработанный в стиле Glassmorphism, с отзывчивыми эффектами и поддержкой темных тем. Он использует Tailwind CSS для стилизации, а также изображения-заполнители из picsum.photos для визуальных эффектов и randomuser.me для аватаров.

Открытый

Ретро-всплывающие уведомления

Отзывчивый компонент всплывающих уведомлений с ретро/винтажным дизайном, триадической цветовой схемой и поддержкой темного режима, созданный с помощью Tailwind CSS для использования в портфолио.

Открытый