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

Notifications 구성 요소

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

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-200 dark:bg-gray-800 flex items-center justify-center p-4">
  <div class="w-full max-w-sm mx-auto bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Notifications</h2>
    
    <div class="space-y-4">
      <!-- Notification 1 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1025/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification 2 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1011/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">New article published: "The Future of AI".</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">1 day ago</p>
        </div>
      </div>

      <!-- Notification 3 -->
      <div class="flex items-center p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-3" src="https://picsum.photos/id/1005/200/200" alt="User Avatar">
        <div>
          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Your subscription is expiring soon.</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
    </div>
    
    <div class="mt-6 text-center">
      <a href="#" class="inline-block px-5 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 rounded-full shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-inset-light dark:hover:shadow-neumorphic-button-inset-dark transition-all duration-300">
        View All Notifications
      </a>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1f1f1f, -6px -6px 12px #3c3c3c;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #3c3c3c;
  }
  .shadow-neumorphic-button-light {
    box-shadow: 4px 4px 8px #b0b0b0, -4px -4px 8px #ffffff;
  }
  .dark .shadow-neumorphic-button-dark {
    box-shadow: 4px 4px 8px #1f1f1f, -4px -4px 8px #3c3c3c;
  }
  .hover\:shadow-neumorphic-button-inset-light:hover {
    box-shadow: inset 4px 4px 8px #b0b0b0, inset -4px -4px 8px #ffffff;
  }
  .dark .hover\:shadow-neumorphic-button-inset-dark:hover {
    box-shadow: inset 4px 4px 8px #1f1f1f, inset -4px -4px 8px #3c3c3c;
  }
</style>

관련 구성 요소

Notifications 구성 요소

Responsive: Notifications: Dashboard에 대한 다크 모드 지원이 있는 구성 요소

열다

Brutalist_Industrial_Notifications_Component

산업 및 제조 애플리케이션을 위한 복잡하고 잔인한 스타일의 알림 구성 요소로, 일몰/따뜻한 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다

Notifications 구성 요소

다크 모드를 지원하는 복잡하고 반응이 빠른 알림 구성요소로, 블로그/콘텐츠 웹사이트를 위한 머티리얼 디자인 원칙과 파스텔 색 구성표로 설계되었습니다.

열다