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

Notifications 구성 요소

머티리얼 디자인(Material Design) 원칙과 전자상거래 애플리케이션을 위한 단색 색 구성표로 설계된 Notifications Component로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">New Message</h2>
          <p class="text-gray-300">You have a new message from a seller.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
      </div>
    </div>
  </div>
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">Order Shipped</h2>
          <p class="text-gray-300">Your order #12345 has been shipped.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Notifications 구성 요소

반응형 디자인과 어두운 테마를 지원하는 Skeuomorphism 스타일의 Notifications Component. 이 구성 요소는 미묘한 그림자와 반짝임 효과를 포함하여 알림에 대해 사실적이고 엠보싱된 모양을 특징으로 합니다. 완벽하게 반응하며 다크 모드에 대한 고유한 스타일을 포함하여 모든 조명 조건에서 가독성과 미적 매력을 보장합니다. 아바타에 자리 표시자 이미지를 사용합니다.

열다

스큐어모픽노티피케이션컴포넌트

Skeuomorphism에서 영감을 받은 간단하고 반응이 빠른 알림 구성 요소로, 비즈니스/기업 웹사이트에 적합한 유사한 색 구성표를 특징으로 합니다. 여기에는 어두운 테마 지원이 포함되며 스타일링에 Tailwind CSS를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.

열다

Notifications 구성 요소

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

열다