Notifications 구성 요소
머티리얼 디자인(Material Design) 원칙, 시원한 무채색, 다크 모드 지원으로 설계된 복잡하고 반응형이 빠른 알림 구성 요소로, 인터랙티브 요소와 깊이 효과를 선보이는 포트폴리오에 적합합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Notifications</h2>
<div class="flex space-x-2">
<button class="px-4 py-2 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
Mark all as read
</button>
<button class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg>
</button>
</div>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<!-- Notification Item 1 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-blue-50 dark:bg-gray-800/50 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-blue-500"></span>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
<span class="font-bold">Alice Johnson</span> commented on your <span class="text-blue-600 dark:text-blue-400 font-medium">post</span>.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">2h ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
"Great insights! I particularly liked your point about the new design trends..."
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-blue-600 dark:text-blue-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Dismiss</button>
</div>
</div>
</div>
<!-- Notification Item 2 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
Your portfolio project <span class="text-indigo-600 dark:text-indigo-400 font-medium">'Modern Dashboard'</span> was approved!
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
Congratulations! Your project is now live and visible to the community.
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">View Project</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">Share</button>
</div>
</div>
</div>
<!-- Notification Item 3 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
<span class="font-bold">Sarah Lee</span> sent you a <span class="text-purple-600 dark:text-purple-400 font-medium">private message</span>.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
"Hi! I saw your work on the Material Design component and wanted to ask about..."
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-purple-600 dark:text-purple-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">View Message</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">Archive</button>
</div>
</div>
</div>
<!-- Notification Item 4 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
<div class="relative flex-shrink-0">
<div class="h-12 w-12 rounded-full bg-red-500 flex items-center justify-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
<span class="text-red-600 dark:text-red-400 font-medium">Warning:</span> Some assets failed to load for 'Photography Showcase'.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">5 days ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
Please check the console for more details. This might affect the display of your project.
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-red-600 dark:text-red-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Resolve Issue</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Ignore</button>
</div>
</div>
</div>
<!-- Notification Item 5 -->
<div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out last:rounded-b-lg">
<div class="relative flex-shrink-0">
<img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://picsum.photos/id/1005/60/60" alt="System Icon">
</div>
<div class="flex-1">
<div class="flex justify-between items-center">
<p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
New <span class="text-cyan-600 dark:text-cyan-400 font-medium">feature update</span> available for the editor.
</p>
<time class="text-xs text-gray-500 dark:text-gray-400">1 week ago</time>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
We've added new collaboration tools and improved performance. Update now to experience!
</p>
<div class="mt-2 flex space-x-2 text-sm">
<button class="text-cyan-600 dark:text-cyan-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Learn More</button>
<button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Dismiss</button>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Notifications 구성 요소
뉴모피즘(Neumorphism) 스타일의 알림 컴포넌트(Notifications Component)는 파스텔 톤의 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 갖추고 있습니다. 비즈니스/기업 웹사이트에 적합합니다.
Memphis_Gaming_Notification_Simple_Forest_Green
Memphis 디자인에 영향을 미치는 단순하고 반응이 빠른 게임 알림 구성 요소는 다크 모드 지원을 포함하여 포레스트 그린 색상 팔레트를 사용합니다.