Notifications 구성 요소
머티리얼 디자인(Material Design) 원칙과 전자상거래 애플리케이션을 위한 단색 색 구성표로 설계된 Notifications Component로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
<div class="w-full max-w-sm">
<div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<h2 class="text-white text-lg font-semibold">New Message</h2>
<p class="text-gray-300">You have a new message from a seller.</p>
</div>
<button class="text-gray-400 hover:text-gray-200">
<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="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
<img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
<div class="mt-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
</div>
</div>
</div>
<div class="w-full max-w-sm">
<div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<h2 class="text-white text-lg font-semibold">Order Shipped</h2>
<p class="text-gray-300">Your order #12345 has been shipped.</p>
</div>
<button class="text-gray-400 hover:text-gray-200">
<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="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
<div class="mt-2">
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
<span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
</div>
</div>
</div>
</div>