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

Notifications 구성 요소

Tailwind CSS를 사용하여 구축된 반응형 효과 및 어두운 테마 지원이 있는 Skeuomorphism 스타일의 알림 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center p-4">
    <!-- Notification 1 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 2 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
    
    <!-- Notification 3 -->
    <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
                <p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
    </div>
</div>

관련 구성 요소

Notifications 구성 요소

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

열다

Notifications 구성 요소

대시보드용으로 설계된 레트로/빈티지 스타일의 알림 구성 요소로, 다양한 대화형 요소와 어두운 테마 지원을 제공합니다.

열다

알림 구성 요소 - 산업 음악/오디오

산업적, 원시적인 미학, 고대비 색상 및 다크 모드를 지원하는 반응형 알림 구성 요소로 음악 및 오디오 플랫폼에 적합합니다. 읽지 않음/읽음 상태와 대화형 요소를 제공합니다.

열다