CCHub Logo CCHub Tailwind Collection
구성 요소 알림을 Notifications 구성 요소

Notifications 구성 요소

Notifications 구성 요소는 비즈니스/기업 웹 애플리케이션에 맞게 조정된 단색 색 구성표의 glassmorphism 디자인을 특징으로 합니다. 이 구성 요소에는 다양한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-8 bg-gray-900 text-white min-h-screen">
    <div class="bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold mb-4">Notifications</h2>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-sm">You have a meeting scheduled at 3 PM.</p>
                <span class="text-xs text-gray-400">10 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-sm">Your invoice has been paid.</p>
                <span class="text-xs text-gray-400">15 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/men/13.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Mike Johnson</p>
                <p class="text-sm">New comment on your post.</p>
                <span class="text-xs text-gray-400">30 minutes ago</span>
            </div>
        </div>
        <!-- Notification Item -->
        <div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
            <img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
            <div class="flex-1">
                <p class="font-semibold">Emily Davis</p>
                <p class="text-sm">Project deadline is approaching.</p>
                <span class="text-xs text-gray-400">1 hour ago</span>
            </div>
        </div>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                View All Notifications
            </button>
        </div>
    </div>
</div>

관련 구성 요소

Memphis_Gaming_Notification_Simple_Forest_Green

Memphis 디자인에 영향을 미치는 단순하고 반응이 빠른 게임 알림 구성 요소는 다크 모드 지원을 포함하여 포레스트 그린 색상 팔레트를 사용합니다.

열다

Luxury Notifications 구성 요소

여행/관광 웹사이트를 위해 설계된 단순하고 우아한 알림 구성 요소로, 기업용 블루 톤의 럭셔리/프리미엄 스타일과 다크 모드 지원을 포함한 완전한 응답성을 특징으로 합니다.

열다

Notifications 구성 요소

Neumorphic Notifications Component는 회색조 색 구성표와 중간 정도의 복잡성을 가지며 블로그/콘텐츠 소비를 위해 설계되었습니다. 반응형이며 어두운 테마를 지원합니다.

열다