Playful_Alert_Messages_Component

<div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen">

  <!-- Live/Now Playing Alert -->
  <div class="max-w-md mx-auto mb-6 bg-white dark:bg-gray-700 rounded-full shadow-lg p-3 flex items-center justify-between transition-all duration-300 ease-in-out hover:scale-105">
    <div class="flex items-center space-x-3">
      <div class="relative w-10 h-10">
        <img src="https://picsum.photos/id/1047/50/50" alt="Album Cover" class="w-full h-full object-cover rounded-full"/>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full animate-ping-slow"></div>
        <div class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-red-500 rounded-full"></div>
      </div>
      <div>
        <p class="text-sm font-semibold text-blue-800 dark:text-blue-200">Now Playing:</p>
        <p class="text-xs text-blue-600 dark:text-blue-300">"Groovy Tune" by Melodia Beats</p>
      </div>
    </div>
    <button class="p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-transform duration-200 transform hover:scale-110">
      <svg class="w-5 h-5 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
      </svg>
    </button>
  </div>

  <!-- Success Message -->
  <div class="max-w-md mx-auto mb-6 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 text-white p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Awesome! Playback Started!</h3>
      <p class="text-sm opacity-90">Your selected track is now streaming. Enjoy the vibes!</p>
    </div>
  </div>

  <!-- Warning Message -->
  <div class="max-w-md mx-auto mb-6 bg-yellow-300 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:-rotate-1 hover:scale-105">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-yellow-700 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">Heads Up! Data Usage Alert!</h3>
      <p class="text-sm opacity-90">You're on a mobile network. Streaming high-quality audio might eat up your data plan.</p>
    </div>
  </div>

  <!-- Error Message with Retry -->
  <div class="max-w-md mx-auto mb-6 bg-red-400 dark:bg-red-700 text-white p-4 rounded-xl shadow-lg flex items-start md:items-center space-x-4 transition-all duration-300 ease-in-out hover:animate-shake">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-bold">Oops! Playback Failed.</h3>
      <p class="text-sm opacity-90 mb-2 md:mb-0">Couldn't load your track. Please check your internet connection.</p>
    </div>
    <button class="flex-shrink-0 bg-white dark:bg-gray-800 text-red-600 dark:text-red-300 px-4 py-2 rounded-full font-semibold text-sm shadow hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
      Retry
    </button>
  </div>

  <!-- Info Message -->
  <div class="max-w-md mx-auto mb-6 bg-blue-200 dark:bg-blue-900 text-blue-800 dark:text-blue-200 p-4 rounded-xl shadow-lg flex items-start space-x-4 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <div>
      <h3 class="text-lg font-bold">New Feature: Shuffle Play!</h3>
      <p class="text-sm opacity-90">Discover personalized mixes with our new intelligent shuffle function.</p>
    </div>
  </div>

  <style>
  /* Custom keyframes for animation */
  @keyframes ping-slow {
    0% {
      transform: scale(0.6);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  /* Keyframes for shake animation */
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }

  .animate-shake {
    animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
  }
  </style>
</div>