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

Toast Notifications 구성 요소

Glassmorphism으로 설계된 반응형 Toast Notifications 구성 요소로, 단색 색 구성표, 다크 모드 지원을 특징으로 하며 포트폴리오에서 사용할 준비가 되어 있습니다.

미리 보기

HTML 코드 

<div class="fixed bottom-5 right-5 space-y-4 z-50">
    <!-- Toast Notification 1 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
                <p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
    <!-- Toast Notification 2 -->
    <div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
        <div class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
            <div class="flex-1">
                <h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
                <p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
            </div>
            <button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>
    </div>
</div>

관련 구성 요소

Toast Notifications 구성 요소

깨끗하고 미니멀한 스위스/인터내셔널 타이포그래피 스타일로 디자인된 토스트 알림 세트로, 유사한 색 구성표를 특징으로 합니다. 사진 관련 웹 사이트에 최적화되어 사용자에게 명확하고 간결한 피드백을 제공합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

Toast Notifications 구성 요소

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

열다

Toast Notifications 구성 요소

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

열다