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

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>

관련 구성 요소

Toast Notifications 구성 요소

Glassmorphism 스타일과 생생한 색 구성표를 갖춘 반응형 Toast Notifications 구성 요소로 전자 상거래 응용 프로그램에 적합합니다. 어두운 테마를 지원하며 여러 대화형 요소가 있는 복잡한 인터페이스가 있습니다.

열다

Toast Notifications 구성 요소

파스텔 색상, 반응형 디자인, 어두운 테마 지원을 제공하는 뉴모픽 토스트 알림 구성 요소로, 블로그 및 콘텐츠 사이트에 적합합니다.

열다

레트로 토스트 알림

레트로/빈티지 디자인, 트라이어딕 색 구성표 및 다크 모드를 지원하는 반응형 Toast Notifications 구성 요소로, Portfolio 사용을 위해 Tailwind CSS로 구축되었습니다.

열다