Notifications 구성 요소
스큐어모픽 요소로 디자인된 반응형 알림 구성 요소로, 보색 구성표와 포트폴리오에 적합한 간단한 레이아웃을 사용합니다.
HTML 코드
<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
<div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
</div>
</div>
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
</div>
<div class="flex items-center justify-between p-4">
<span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
<button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
</div>
</div>
<div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
<div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
</div>
<div class="flex items-center justify-between p-4">
<span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
<button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
</div>
</div>
</div>관련 구성 요소
Notifications 구성 요소
반응형 디자인과 어두운 테마를 지원하는 Skeuomorphism 스타일의 Notifications Component. 이 구성 요소는 미묘한 그림자와 반짝임 효과를 포함하여 알림에 대해 사실적이고 엠보싱된 모양을 특징으로 합니다. 완벽하게 반응하며 다크 모드에 대한 고유한 스타일을 포함하여 모든 조명 조건에서 가독성과 미적 매력을 보장합니다. 아바타에 자리 표시자 이미지를 사용합니다.