Компонент уведомлений
Компонент уведомлений в стиле скевоморфизма с адаптивным дизайном и поддержкой темных тем. Этот компонент отличается реалистичным рельефным видом уведомлений, включая тонкий эффект тени и блика. Он полностью адаптивный и включает в себя различные стили для темного режима, обеспечивая читаемость и эстетическую привлекательность при любых условиях освещения. Использует изображения-заполнители для аватаров.
HTML-код
<div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>
<!-- Notification 1 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
</div>
</div>
<!-- Notification 2 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
</div>
</div>
<!-- Notification 3 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
</div>
</div>
</div>Связанные компоненты
Компонент уведомлений
Отзывчивый компонент уведомлений с микровзаимодействиями, триадической цветовой схемой и поддержкой темных тем, предназначенный для демонстрации работы или продуктов.
Компонент уведомлений
Компонент уведомлений, разработанный в соответствии с принципами Material Design и монохроматической цветовой схемой для приложений электронной коммерции, с адаптивным дизайном и поддержкой темных тем.
Минималистичный компонент уведомлений (оттенки серого)
Простой, минималистичный компонент уведомлений в оттенках серого для портфолио с поддержкой отзывчивого и темного режима с использованием Tailwind CSS. Использует picsum.photos для изображений и randomuser.me для аватаров.