Notifications 구성 요소
Responsive: Notifications: Dashboard에 대한 다크 모드 지원이 있는 구성 요소
HTML 코드
<div class="relative">
<!-- Notifications Button -->
<button class="relative flex items-center justify-center w-10 h-10 bg-blue-500 text-white rounded-full shadow-lg focus:outline-none dark:bg-blue-700">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path>
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full dark:bg-red-800">3</span>
</button>
<!-- Notifications Dropdown (Hidden by Default) -->
<div class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-10 dark:bg-gray-800 dark:text-gray-200">
<div class="py-2">
<!-- Notification Item 1 -->
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<p class="text-sm">
<span class="font-bold">John Doe</span> added a new report.
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</p>
</a>
<!-- Notification Item 2 -->
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<p class="text-sm">
<span class="font-bold">Jane Smith</span> commented on your task.
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
</p>
</a>
<!-- Notification Item 3 -->
<a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
<img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
<p class="text-sm">
<span class="font-bold">David Green</span> completed a project.
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
</p>
</a>
</div>
<!-- View All Button -->
<a href="#" class="block bg-gray-50 text-center font-bold py-3 text-blue-500 hover:underline dark:bg-gray-700 dark:text-blue-400">
View All Notifications
</a>
</div>
</div>
관련 구성 요소
Notifications 구성 요소
머티리얼 디자인 스타일, 보색 구성표 및 다크 모드 지원을 제공하는 반응형 알림 구성 요소로, 대시보드 목적으로 Tailwind CSS로 구축되었습니다.
Notifications 구성 요소
Neumorphic Notifications Component는 회색조 색 구성표와 중간 정도의 복잡성을 가지며 블로그/콘텐츠 소비를 위해 설계되었습니다. 반응형이며 어두운 테마를 지원합니다.
Notifications 구성 요소
머티리얼 디자인(Material Design) 원칙, 시원한 무채색, 다크 모드 지원으로 설계된 복잡하고 반응형이 빠른 알림 구성 요소로, 인터랙티브 요소와 깊이 효과를 선보이는 포트폴리오에 적합합니다.