Notifications 구성 요소
3D 디자인, 단순한 회색조 레이아웃 및 어두운 테마 지원을 갖춘 반응형 알림 구성 요소로 비즈니스 웹 사이트에 적합합니다.
HTML 코드
<div class="dark:bg-gray-900 bg-gray-100 p-6 rounded-lg shadow-lg relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 opacity-20 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="text-gray-900 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">New message received.</p>
</div>
</div>
<div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div>
<p class="text-gray-900 dark:text-white font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
</div>
</div>
<div class="flex items-center bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition duration-300 hover:scale-[1.02] hover:shadow-lg">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
<div>
<p class="text-gray-900 dark:text-white font-semibold">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your photo.</p>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Notifications 구성 요소
마이크로 인터랙션, 트라이어딕 색 구성표 및 어두운 테마 지원을 제공하는 반응형 알림 구성 요소로, 작업 또는 제품을 보여주기 위해 설계되었습니다.
스큐어모픽노티피케이션컴포넌트
Skeuomorphism에서 영감을 받은 간단하고 반응이 빠른 알림 구성 요소로, 비즈니스/기업 웹사이트에 적합한 유사한 색 구성표를 특징으로 합니다. 여기에는 어두운 테마 지원이 포함되며 스타일링에 Tailwind CSS를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.