Всплывающие уведомления
Компонент всплывающих уведомлений со стилем Glassmorphism, отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS
HTML-код
<div class="fixed bottom-0 right-0 mb-4 mr-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
<div class="flex items-center justify-between px-4 py-2">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="px-4 py-2">
<p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
</div>
</div>
</div>Связанные компоненты
Компонент всплывающих уведомлений
Отзывчивый компонент всплывающих уведомлений со стилем Glassmorphism и яркой цветовой схемой, подходящий для приложений электронной коммерции. Он поддерживает темную тему и имеет сложный интерфейс с множеством интерактивных элементов.
Компонент всплывающих уведомлений
Компонент всплывающих уведомлений, разработанный в стиле Glassmorphism, с отзывчивыми эффектами и поддержкой темных тем. Он использует Tailwind CSS для стилизации, а также изображения-заполнители из picsum.photos для визуальных эффектов и randomuser.me для аватаров.
Компонент всплывающих уведомлений
Компонент всплывающих уведомлений в пастельных тонах в стиле Glassmorphism, предназначенный для блогов и потребления контента. Он поддерживает темный режим и отличается богатым интерфейсом с интерактивными элементами.