Toast Notifications 구성 요소
Tailwind CSS를 사용하는 브루탈리즘 스타일의 토스트 알림 구성 요소로, 작업이나 제품을 선보이는 포트폴리오를 위해 설계되었습니다. 이 디자인은 유사한 색 구성표를 통합하고 복잡한 인터페이스로 다크 모드를 지원합니다.
HTML 코드
<div class="fixed top-4 right-4 z-50 space-y-4">
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-red-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Notification Title</h2>
<p class="text-sm">This is a sample toast notification message that showcases important updates or alerts.</p>
</div>
<button class="ml-2 p-2 text-sm text-red-500 hover:bg-red-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-yellow-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Another Notification</h2>
<p class="text-sm">This is another toast notification that provides insights or next steps for users.</p>
</div>
<button class="ml-2 p-2 text-sm text-yellow-500 hover:bg-yellow-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-lg dark:bg-gray-900 border border-blue-500">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar">
<div class="flex-1">
<h2 class="font-bold text-lg">Success Notification</h2>
<p class="text-sm">Your latest action was successful. Keep up the great work!</p>
</div>
<button class="ml-2 p-2 text-sm text-blue-500 hover:bg-blue-400 rounded-full transition duration-200 ease-in-out">Close</button>
</div>
</div>
</div>관련 구성 요소
Art Deco Toast Notifications 구성 요소
아르데코 미학이 가미된 단순하고 대비가 높은 토스트 알림 구성 요소로, 뉴스 및 저널리즘 웹사이트에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.
Toast Notifications 구성 요소
Glassmorphism 스타일로 디자인된 Toast Notifications 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 스타일링에는 Tailwind CSS를 사용하고, 비주얼에는 picsum.photos의 플레이스홀더 이미지를, 아바타에는 randomuser.me 사용합니다.