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 구성 요소

보석 톤 그라데이션 전환이 있는 반응형 토스트 알림 구성 요소로, 정부/공공 서비스 웹사이트용으로 설계되었으며 밝은 모드와 어두운 모드를 지원합니다.

열다

토스트 알림

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

열다

Toast Notifications 구성 요소

어두운 테마를 지원하는 Tailwind CSS를 사용하는 Neumorphism 스타일의 Toast Notifications 구성 요소입니다.

열다