Компонент уведомлений
Компонент уведомлений, стилизованный под скевоморфизм с отзывчивыми эффектами и поддержкой темной темы, построенный с использованием Tailwind CSS.
HTML-код
<div class="flex flex-col items-center p-4">
<!-- Notification 1 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 2 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 3 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
</div>Связанные компоненты
Memphis_Gaming_Notification_Simple_Forest_Green
Простой, отзывчивый компонент игровых уведомлений с элементами дизайна Memphis, использующий цветовую палитру зеленого леса, включая поддержку темного режима.
Компонент уведомлений
Простой, понятный и высококонтрастный компонент уведомлений, подходящий для корпоративных/профессиональных систем бронирования и бронирования, с полной отзывчивостью и поддержкой темного режима.
Компонент уведомлений
Компонент отзывчивых уведомлений, разработанный со скевоморфными элементами, с использованием дополнительной цветовой гаммы и простой верстки, подходящей для портфолио.