Toast Notifications 구성 요소
Glassmorphism 스타일과 생생한 색 구성표를 갖춘 반응형 Toast Notifications 구성 요소로 전자 상거래 응용 프로그램에 적합합니다. 어두운 테마를 지원하며 여러 대화형 요소가 있는 복잡한 인터페이스가 있습니다.
HTML 코드
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
<!-- Toast Notification -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-vibrant-500 dark:text-vibrant-300">John Doe</p>
<p class="text-gray-700 dark:text-gray-300">Your order has been shipped!</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
×
</button>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img src="https://picsum.photos/400/200?random=1" alt="Product Image" class="w-full rounded-lg mb-2">
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name</p>
<p class="text-gray-600 dark:text-gray-400">Price: $29.99</p>
<button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
View Order
</button>
</div>
</div>
</div>
<!-- Toast Notification (Alternate) -->
<div class="fixed inset-0 flex items-end justify-center p-4 space-y-4 z-50">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg border border-gray-200 dark:border-gray-700 overflow-hidden w-full max-w-sm">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="font-semibold text-vibrant-500 dark:text-vibrant-300">Jane Smith</p>
<p class="text-gray-700 dark:text-gray-300">You have a new message!</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-vibrant-500 dark:hover:text-vibrant-300">
×
</button>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<p class="font-semibold text-gray-800 dark:text-gray-200">Check your inbox for more details.</p>
<button class="mt-2 w-full bg-vibrant-500 dark:bg-vibrant-400 text-white font-semibold hover:bg-vibrant-600 dark:hover:bg-vibrant-300 rounded-lg py-2">
View Messages
</button>
</div>
</div>
</div>
관련 구성 요소
Toast Notifications 구성 요소
Tailwind CSS로 구축된 스큐어모픽 디자인 및 다크 모드 지원 기능이 있는 반응형 Toast Notification 구성 요소입니다.
Toast Notifications 구성 요소
대시보드 애플리케이션용으로 설계된 다크 모드 토스트 알림 구성 요소로, 다양한 대화형 요소가 있는 보색 구성표를 특징으로 합니다.