Memphis_Notifications_Component

<div class="p-4 sm:p-6 md:p-8 bg-beige-50 dark:bg-gray-800 font-sans min-h-screen">
  <div class="max-w-md mx-auto relative rounded-lg overflow-hidden border-2 border-gray-300 dark:border-gray-700 shadow-lg">

    <!-- Memphis Design Elements (BG) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute top-4 left-4 w-12 h-12 bg-cream-500 rounded-full"></div>
      <div class="absolute bottom-20 -right-6 w-24 h-16 bg-warm-gray-300 transform -rotate-12"></div>
      <div class="absolute top-1/3 -left-8 w-20 h-10 bg-beige-700 transform rotate-45"></div>
      <div class="absolute bottom-4 right-4 w-8 h-8 bg-cream-700 rounded-lg"></div>
      <div class="absolute top-1/2 left-1/4 w-16 h-16 rounded-full border-4 border-warm-gray-400"></div>
    </div>

    <div class="relative z-10 bg-white dark:bg-gray-900 rounded-lg p-6 sm:p-8 flex flex-col space-y-4">
      <h2 class="text-2xl sm:text-3xl font-bold text-beige-800 dark:text-cream-300 mb-4 text-center">
        Your Updates
      </h2>

      <!-- Notification Item 1 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">Sarah J. just <span class="text-beige-900 dark:text-cream-200">donated $50</span> to your 'Clean Water Initiative'.</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in animate-delay-100">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">New message from <span class="text-beige-900 dark:text-cream-200">Volunteer Coordinator</span>.</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">Yesterday at 10:30 AM</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="flex items-start bg-beige-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-beige-200 dark:border-gray-700 animate-fade-in animate-delay-200">
        <img src="https://picsum.photos/id/1005/50/50" alt="Campaign icon" class="w-10 h-10 rounded-full mr-4 border-2 border-beige-300 dark:border-gray-600 object-cover">
        <div class="flex-1">
          <p class="text-beige-700 dark:text-cream-400 font-semibold">'Education for All' campaign reached <span class="text-beige-900 dark:text-cream-200">75% of its goal</span>!</p>
          <p class="text-sm text-warm-gray-500 dark:text-gray-500 mt-1">3 days ago</p>
        </div>
      </div>

      <div class="text-center mt-6">
        <a href="#" class="inline-block px-6 py-3 rounded-full bg-beige-900 text-white dark:bg-cream-600 dark:text-beige-900 font-bold text-lg hover:bg-beige-700 dark:hover:bg-cream-700 transition-colors duration-300 transform hover:scale-105 shadow-md">
          View All
        </a>
      </div>
    </div>
  </div>

  <!-- Custom Tailwind Colors (for demonstration, normally in tailwind.config.js) -->
  <style>
    .bg-beige-50 { background-color: #fcfbf8; }
    .bg-beige-100 { background-color: #f7f5f0; }
    .border-beige-200 { border-color: #edebe4; }
    .border-beige-300 { border-color: #e2e0dc; }
    .text-beige-700 { color: #8e8a7d; }
    .text-beige-800 { color: #6d6a61; }
    .text-beige-900 { color: #4b4840; }
    
    .bg-cream-500 { background-color: #e6b26d; } /* Primary Accent */
    .bg-cream-600 { background-color: #d19f5a; }
    .bg-cream-700 { background-color: #b28549; }
    .dark\:text-cream-200 { color: #fdf2e1; }
    .dark\:text-cream-300 { color: #fbebd0; }
    .dark\:text-cream-400 { color: #f5dfba; }
    
    .bg-warm-gray-300 { background-color: #d3d0c9; }
    .border-warm-gray-400 { border-color: #b6b3ac; }

    /* Simple fade-in animation example */
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fade-in 0.5s ease-out forwards;
      opacity: 0;
    }
    .animate-delay-100 { animation-delay: 0.1s; }
    .animate-delay-200 { animation-delay: 0.2s; }
  </style>
</div>