Notifications 구성 요소

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