Composant Notifications - Musique/Audio industriels

<div class="font-sans bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 shadow-xl dark:shadow-2xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
    <div class="flex justify-between items-center p-4 sm:p-6 border-b border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800">
      <h2 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-500 tracking-wide uppercase">Notifications</h2>
      <button aria-label="Mark all as read" class="text-sm text-stone-600 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 font-medium px-3 py-1 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Mark all as read
      </button>
    </div>

    <ul class="divide-y divide-stone-200 dark:divide-stone-700">
      <!-- Unread Notification 1: New Release -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-md object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/1040/90/90" alt="Album Cover">
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">NEW RELEASE</p>
            <p class="font-bold text-lg leading-tight mb-1">'Neon City Beats' by <span class="text-red-700 dark:text-red-500">Synthwave Savant</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Their latest album just dropped! Dive into a symphony of retro-futuristic sounds. Available now.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Listen Now" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Listen Now
              </button>
              <button aria-label="Dismiss" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Dismiss
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">5 minutes ago</p>
      </li>

      <!-- Read Notification 1: Artist Followed -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">ARTIST UPDATE</p>
            <p class="font-semibold text-lg leading-tight mb-1"><span class="text-red-700 dark:text-red-500">Echoes of Tomorrow</span> just uploaded 3 new tracks!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Check out their latest experimental soundscapes: 'Quantum Leap,' 'Urban Decay,' and 'Spectral Bloom.'</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">View Artist Profile</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 hour ago</p>
      </li>

      <!-- Unread Notification 2: Playlist Recommendation -->
      <li class="p-4 sm:p-6 bg-red-50 dark:bg-red-950/20 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 relative group">
        <span class="absolute top-3 right-3 sm:top-5 sm:right-5 h-3 w-3 sm:h-4 sm:w-4 bg-red-600 rounded-full animate-pulse"></span>
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-red-600 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v4c0 .55-.45 1-1 1h-4zm3-5H9v2h4v-2z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-red-700 dark:text-red-400 font-semibold mb-1">RECOMMENDED FOR YOU</p>
            <p class="font-bold text-lg leading-tight mb-1">Fresh Playlist: <span class="text-red-700 dark:text-red-500">'Industrial Echoes'</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Based on your recent listening, we've curated a new playlist featuring raw, gritty electronic sounds.</p>
            <div class="flex space-x-3 text-sm">
              <button aria-label="Explore Playlist" class="px-3 py-1 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
                Explore Playlist
              </button>
              <button aria-label="Not Interested" class="px-3 py-1 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-50">
                Not Interested
              </button>
            </div>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 hours ago</p>
      </li>

      <!-- Read Notification 2: System Update -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 sm:h-14 sm:w-14 text-stone-600 dark:text-stone-400 flex-shrink-0 mr-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99H9S8.5 12 8 12.5s-1 1-1 1.5.5 1 .5 1.5 1 1 1.5 1 1.5.5 1.5 1 0 .5-1 .5H9c-1.1 0-2 .9-2 2s.9 2 2 2h6c1.1 0 2.2-.95 2-2 0 0 .04-.32 0-.5C16.89 16.53 16.5 16 16 16s-1-.5-1-1c0-.5-.5-1-1-1h-1v-2c0-.5-.5-1-1-1H12v-1.01z"/>
          </svg>
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">SYSTEM ANNOUNCEMENT</p>
            <p class="font-semibold text-lg leading-tight mb-1">Platform Update: <span class="text-red-700 dark:text-red-500">Enhanced Audio Playback</span></p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">We've rolled out improvements to audio streaming quality and stability across all devices.</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Read More</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">1 day ago</p>
      </li>

      <!-- Read Notification 3: Community Event -->
      <li class="p-4 sm:p-6 text-stone-700 dark:text-stone-300 border-l-4 border-transparent hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200">
        <div class="flex items-start">
          <img class="h-12 w-12 sm:h-14 sm:w-14 rounded-full object-cover border border-stone-300 dark:border-stone-600 flex-shrink-0 mr-4" src="https://picsum.photos/id/400/90/90" alt="Event Banner">
          <div class="flex-grow">
            <p class="text-sm text-stone-500 dark:text-stone-400 mb-1">COMMUNITY NEWS</p>
            <p class="font-semibold text-lg leading-tight mb-1">Join our <span class="text-red-700 dark:text-red-500">Live DJ Set</span> this Friday!</p>
            <p class="text-stone-700 dark:text-stone-300 text-sm mb-2">Prepare for an electrifying industrial techno set from DJ 'Circuit Breaker'. Don't miss it!</p>
            <a href="#" class="text-red-600 dark:text-red-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Set Reminder</a>
          </div>
        </div>
        <p class="text-xs text-stone-500 dark:text-stone-400 mt-3 text-right leading-none">3 days ago</p>
      </li>
    </ul>

    <div class="p-4 sm:p-6 border-t border-stone-200 dark:border-stone-700 bg-stone-100 dark:bg-stone-800 text-center">
      <button aria-label="Load more notifications" class="text-red-600 dark:text-red-500 hover:text-red-700 dark:hover:text-red-400 text-base font-semibold focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        Load More
      </button>
    </div>
  </div>
</div>