구성 요소 알림을 Notifications 구성 요소

Notifications 구성 요소

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

미리 보기

HTML 코드

<div class="container mx-auto p-4 md:p-8 dark:bg-gray-900">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Notifications</h2>

  <!-- Notification 1 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Commented on your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
    </div>
    <div class="p-4 text-gray-700 dark:text-gray-300">
      <p>"This is a great article, thanks for sharing!"</p>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md mb-4 overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
      <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">5 hours ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center px-4 py-3 border-b border-gray-200 dark:border-gray-700">
       <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://picsum.photos/id/237/200/300" alt="Post Image">
      <div class="flex-1">
        <p class="text-gray-800 dark:text-white font-semibold">New Post Alert</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">A new article you might be interested in</p>
      </div>
      <span class="text-gray-500 dark:text-gray-400 text-sm">1 day ago</span>
    </div>
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right">
      <button class="text-sm text-blue-600 dark:text-blue-400 hover:underline mr-4">View Post</button>
      <button class="text-sm text-red-600 dark:text-red-400 hover:underline">Dismiss</button>
    </div>
  </div>

</div>

관련 구성 요소

Notifications 구성 요소

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

열다

Notifications 구성 요소

3D 디자인, 단순한 회색조 레이아웃 및 어두운 테마 지원을 갖춘 반응형 알림 구성 요소로 비즈니스 웹 사이트에 적합합니다.

열다

Notifications 구성 요소

다크 모드를 지원하는 간단하고 반응이 빠른 알림 구성 요소로, 회색조 색 구성표가 있는 스큐어모픽 스타일로 설계되었습니다. 최소한의 디자인 기술을 보여주는 포트폴리오에 이상적입니다.

열다