알림을

Notifications 구성 요소

스큐어모픽 요소로 디자인된 반응형 알림 구성 요소로, 보색 구성표와 포트폴리오에 적합한 간단한 레이아웃을 사용합니다.

                <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Notifications</h2>
    <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Uploaded a new project.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=1" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</span>
            <button class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-2 rounded-lg">View</button>
        </div>
    </div>
    <div class="mt-4 bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow">
        <div class="flex items-start p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your photo.</p>
            </div>
        </div>
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <img src="https://picsum.photos/200/100?random=2" alt="Project Image" class="rounded-md">
        </div>
        <div class="flex items-center justify-between p-4">
            <span class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</span>
            <button class="bg-green-500 dark:bg-green-700 text-white px-4 py-2 rounded-lg">Reply</button>
        </div>
    </div>
</div>

Notifications 구성 요소

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

미리보기 열기

                <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 구성 요소

마이크로 인터랙션, 트라이어딕 색 구성표 및 어두운 테마 지원을 제공하는 반응형 알림 구성 요소로, 작업 또는 제품을 보여주기 위해 설계되었습니다.

미리보기 열기

                <div class="max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Liked your project "Sunset Scenery"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">2 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Commented on your work "Abstract Art"</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">10 minutes ago</span>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-md p-4 transform transition-transform duration-300 hover:scale-105">
            <div class="flex items-start">
                <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Alex Johnson</h3>
                    <p class="text-sm text-gray-700 dark:text-gray-400">Followed you</p>
                    <span class="text-xs text-gray-500 dark:text-gray-400">30 minutes ago</span>
                </div>
            </div>
        </div>
    </div>
</div>

Notifications 구성 요소

레트로/빈티지 알림 구성 요소는 포트폴리오 작업을 보여주기 위해 흙색과 복잡한 상호 작용으로 설계되었습니다.

미리보기 열기

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Notifications</h2>
    <div class="space-y-4">
        <div class="bg-green-100 dark:bg-green-900 border-l-4 border-green-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">John Doe</p>
                    <p class="text-brown-600 dark:text-brown-400">You have a new message!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">2 minutes ago</p>
                </div>
            </div>
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">Jane Smith</p>
                    <p class="text-brown-600 dark:text-brown-400">Your portfolio has been viewed!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">10 minutes ago</p>
                </div>
            </div>
        </div>
        <div class="bg-red-100 dark:bg-red-900 border-l-4 border-red-600 p-3 rounded-md">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-brown-800 dark:text-brown-200">Alice Brown</p>
                    <p class="text-brown-600 dark:text-brown-400">Your project deadline is approaching!</p>
                    <p class="text-gray-500 dark:text-gray-400 text-sm">30 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
    <button class="mt-4 w-full bg-brown-600 dark:bg-brown-700 text-white py-2 rounded-lg hover:bg-brown-500 dark:hover:bg-brown-600">View All Notifications</button>
</div>

Notifications 구성 요소

Responsive Notifications 구성 요소는 소셜 미디어 인터페이스를 지원하며 생생한 색 구성표로 제공됩니다.

미리보기 열기

                <div class="p-4 bg-gray-900 dark:bg-black text-white rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-teal-400">Notifications</h2>
  <div class="space-y-4">
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-purple-400">John Doe</span> liked your post.</p>
      <span class="text-gray-500 text-sm">2 min ago</span>
    </div>
    <div class="flex items-center border-b border-gray-700 pb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-pink-400">Jane Smith</span> commented on your photo.</p>
      <span class="text-gray-500 text-sm">1 hour ago</span>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <p class="flex-grow"><span class="font-semibold text-yellow-400">Peter Jones</span> started following you.</p>
      <span class="text-gray-500 text-sm">3 hours ago</span>
    </div>
  </div>
</div>

Notifications 구성 요소

전자 상거래를 위한 레트로/빈티지 미학과 생생한 색상으로 설계된 복잡한 알림 구성 요소로, 다크 모드를 지원합니다.

미리보기 열기

                <div class="relative z-10">
  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
        </div>
      </div>
      <div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

Minimalist Notifications 구성 요소(회색조)

포트폴리오를 위한 회색조의 간단하고 미니멀한 알림 구성 요소로, Tailwind CSS를 사용하여 반응형 및 다크 모드를 지원합니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

미리보기 열기

                <div class="container mx-auto p-4">

  <!-- Light mode (default) -->
  <div class="bg-white shadow-md rounded-lg p-4 mb-4 hidden dark:block">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-800 font-semibold">New Message</p>
        <p class="text-gray-600 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Dark mode -->
  <div class="bg-gray-800 shadow-md rounded-lg p-4 mb-4 dark:hidden">
    <div class="flex items-start">
      <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <div class="flex-grow">
        <p class="text-gray-200 font-semibold">New Message</p>
        <p class="text-gray-400 text-sm">You have a new message from John Doe.</p>
      </div>
      <button class="text-gray-500 hover:text-gray-300 focus:outline-none">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
  </div>

</div>

Notifications 구성 요소

뉴모피즘(Neumorphism) 스타일의 알림 컴포넌트(Notifications Component)는 파스텔 톤의 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 갖추고 있습니다. 비즈니스/기업 웹사이트에 적합합니다.

미리보기 열기

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphism-light dark:shadow-neumorphism-dark rounded-lg">
  <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Notifications</h2>
  
  <!-- Notification Item 1 -->
  <div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
    <img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div class="flex-grow">
      <p class="text-sm font-medium text-gray-800 dark:text-gray-100">John Doe commented on your post.</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
    </div>
    <button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 focus:outline-none">
      <svg class="w-4 h-4" 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"></path></svg>
    </button>
  </div>

  <!-- Notification Item 2 -->
  <div class="flex items-center p-3 mb-3 bg-gray-200 dark:bg-gray-700 rounded-md shadow-neumorphism-inner-light dark:shadow-neumorphism-inner-dark">
    <img class="w-10 h-10 rounded-full mr-3 shadow-neumorphism-light dark:shadow-neumorphism-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div class="flex-grow">
      <p class="text-sm font-medium text-gray-800 dark:text-gray-100">Your subscription is about to expire.</p>
      <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
    </div>
     <button class="ml-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 focus:outline-none">
      <svg class="w-4 h-4" 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"></path></svg>
    </button>
  </div>
  
  <!-- Add more notification items as needed -->

</div>

<style>
  /* Custom Neumorphism shadows - adjust values as needed */
  .shadow-neumorphism-light {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-light {
       box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
   .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .dark .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .shadow-neumorphism-inner-light {
      box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphism-inner-light {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
  .shadow-neumorphism-inner-dark {
      box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
   .dark .shadow-neumorphism-inner-dark {
      box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
</style>

Notifications 구성 요소

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

미리보기 열기

                <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>

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

미리보기 열기

                <div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
  <h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>

  <!-- Notification 1 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
    </div>
  </div>

  <!-- Notification 2 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
    </div>
  </div>

  <!-- Notification 3 -->
  <div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
    <img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
    <div class="flex-1">
      <p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
      <p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
    </div>
  </div>

</div>

카테고리