Компонент уведомлений
Компонент отзывчивых уведомлений с поддержкой темного режима для интерфейсов социальных сетей, с яркой цветовой гаммой.
HTML-код
<div class="p-4 bg-gray-900 dark:bg-black text-white rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4 text-teal-400">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center border-b border-gray-700 pb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="flex-grow"><span class="font-semibold text-purple-400">John Doe</span> liked your post.</p>
<span class="text-gray-500 text-sm">2 min ago</span>
</div>
<div class="flex items-center border-b border-gray-700 pb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="flex-grow"><span class="font-semibold text-pink-400">Jane Smith</span> commented on your photo.</p>
<span class="text-gray-500 text-sm">1 hour ago</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="flex-grow"><span class="font-semibold text-yellow-400">Peter Jones</span> started following you.</p>
<span class="text-gray-500 text-sm">3 hours ago</span>
</div>
</div>
</div>Связанные компоненты
Компонент уведомлений
Компонент Neumorphic Notifications с цветовой схемой в оттенках серого и умеренной сложностью, предназначенный для потребления блогов и контента. Он адаптивный и поддерживает темную тему.
Компонент уведомлений
Простой, отзывчивый компонент уведомлений с поддержкой темного режима, выполненный в скевоморфном стиле с цветовой гаммой в оттенках серого. Идеально подходит для портфолио, чтобы продемонстрировать минимальные навыки дизайна.
Компонент уведомлений
Отзывчивый компонент уведомлений со стилем Material Design, дополнительной цветовой схемой и поддержкой темного режима, созданный с помощью Tailwind CSS для использования на панели управления.