알림 구성 요소 26
Tailwind CSS로 설계된 미니멀리스트 알림 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 하며 아바타 및 이미지가 포함된 알림 목록을 표시합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
<h2 class="text-xl font-semibold mb-4">Notifications</h2>
<div class="space-y-3">
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe liked your post</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Just now</p>
</div>
<img src="https://picsum.photos/40/40" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith commented on your photo</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">5 minutes ago</p>
</div>
<img src="https://picsum.photos/40/41" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Mark Wilson started following you</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">10 minutes ago</p>
</div>
<img src="https://picsum.photos/40/42" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
</div>
</div>관련 구성 요소
Notifications 구성 요소
머티리얼 디자인(Material Design) 원칙, 시원한 무채색, 다크 모드 지원으로 설계된 복잡하고 반응형이 빠른 알림 구성 요소로, 인터랙티브 요소와 깊이 효과를 선보이는 포트폴리오에 적합합니다.