CCHub Logo CCHub Tailwind Collection
구성 요소 토스트 알림 Toast Notifications 구성 요소

Toast Notifications 구성 요소

대시보드 애플리케이션용으로 설계된 다크 모드 토스트 알림 구성 요소로, 다양한 대화형 요소가 있는 보색 구성표를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="fixed bottom-5 right-5 space-y-4">
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">John Doe</p>
            <p class="text-sm">Successfully completed the action.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Dismiss
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm">You have new messages.</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            View
        </button>
    </div>
    <div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
            <p class="font-semibold">Mike Johnson</p>
            <p class="text-sm">Error occurred during processing!</p>
        </div>
        <button class="text-blue-500 hover:text-blue-400 focus:outline-none">
            Retry
        </button>
    </div>
</div>

관련 구성 요소

Toast Notifications 구성 요소

Glassmorphism 스타일로 디자인된 Toast Notifications 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 스타일링에는 Tailwind CSS를 사용하고, 비주얼에는 picsum.photos의 플레이스홀더 이미지를, 아바타에는 randomuser.me 사용합니다.

열다

Toast Notifications 구성 요소

파스텔 색상의 Glassmorphism 스타일의 Toast Notifications 구성 요소는 블로그 및 콘텐츠 소비를 위해 설계되었습니다. 다크 모드를 지원하며 대화형 요소가 있는 풍부한 인터페이스를 제공합니다.

열다

토스트 알림

반응형, 어두운 테마와 호환되는 Toast Notifications Components는 보색 구성표를 사용하는 미니멀리스트/플랫 디자인의 전자 상거래를 위한 구성 요소입니다.

열다