<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen flex items-start justify-center dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 font-sans">
<div class="w-full max-w-md space-y-4 sm:space-y-6">
<!-- Success Notification -->
<div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-green-200 to-green-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-green-700 dark:to-green-800 dark:shadow-[0_4px_15px_rgba(0,255,0,0.3)] dark:border dark:border-green-600 border border-green-300">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500 flex items-center justify-center shadow-inner-lg shadow-green-700/50 dark:bg-green-600 dark:shadow-green-900/50">
<svg class="w-7 h-7 text-white" 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="M5 13l4 4L19 7"></path>
</svg>
</div>
<div class="ml-4 flex-1">
<p class="text-lg font-bold text-green-800 dark:text-green-200 drop-shadow-sm">Download Complete</p>
<p class="text-sm text-green-700 dark:text-green-300">Your movie 'The Abyss' is ready to watch!</p>
<div class="mt-2 text-xs text-green-600 dark:text-green-400">Just now</div>
<div class="absolute bottom-2 right-2 text-xs text-green-600/70 dark:text-green-400/70 font-mono">ID: #2023-A001</div>
</div>
<button aria-label="Close success notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-green-400/70 hover:bg-green-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-green-600/70 dark:hover:bg-green-700/80">
<svg class="w-5 h-5 text-green-800 dark:text-green-200" 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>
<!-- Warning Notification -->
<div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-yellow-200 to-yellow-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-yellow-700 dark:to-yellow-800 dark:shadow-[0_4px_15px_rgba(255,255,0,0.3)] dark:border dark:border-yellow-600 border border-yellow-300">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center shadow-inner-lg shadow-yellow-700/50 dark:bg-yellow-600 dark:shadow-yellow-900/50">
<svg class="w-7 h-7 text-white" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
<div class="ml-4 flex-1">
<p class="text-lg font-bold text-yellow-800 dark:text-yellow-200 drop-shadow-sm">Parental Advisory</p>
<p class="text-sm text-yellow-700 dark:text-yellow-300">Content not suitable for all ages. Viewer discretion advised.</p>
<div class="mt-2 text-xs text-yellow-600 dark:text-yellow-400">1 minute ago</div>
<div class="absolute bottom-2 right-2 text-xs text-yellow-600/70 dark:text-yellow-400/70 font-mono">ID: #2023-B002</div>
</div>
<button aria-label="Close warning notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-yellow-400/70 hover:bg-yellow-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-yellow-600/70 dark:hover:bg-yellow-700/80">
<svg class="w-5 h-5 text-yellow-800 dark:text-yellow-200" 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>
<!-- Error Notification -->
<div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-red-200 to-red-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-red-700 dark:to-red-800 dark:shadow-[0_4px_15px_rgba(255,0,0,0.3)] dark:border dark:border-red-600 border border-red-300">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 flex items-center justify-center shadow-inner-lg shadow-red-700/50 dark:bg-red-600 dark:shadow-red-900/50">
<svg class="w-7 h-7 text-white" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-4 flex-1">
<p class="text-lg font-bold text-red-800 dark:text-red-200 drop-shadow-sm">Playback Error</p>
<p class="text-sm text-red-700 dark:text-red-300">Cannot play 'Episode 3': License expired (Error 403).</p>
<div class="mt-2 text-xs text-red-600 dark:text-red-400">5 minutes ago</div>
<div class="absolute bottom-2 right-2 text-xs text-red-600/70 dark:text-red-400/70 font-mono">ID: #2023-C003</div>
</div>
<button aria-label="Close error notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-red-400/70 hover:bg-red-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-red-600/70 dark:hover:bg-red-700/80">
<svg class="w-5 h-5 text-red-800 dark:text-red-200" 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>
<!-- Info Notification with Avatar/Image -->
<div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-blue-200 to-blue-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-blue-700 dark:to-blue-800 dark:shadow-[0_4px_15px_rgba(0,0,255,0.3)] dark:border dark:border-blue-600 border border-blue-300">
<div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-blue-500 flex items-center justify-center shadow-inner-lg shadow-blue-700/50 dark:bg-blue-600 dark:shadow-blue-900/50">
<img src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar" class="object-cover w-full h-full border-2 border-blue-400 dark:border-blue-500"/>
</div>
<div class="ml-4 flex-1">
<p class="text-lg font-bold text-blue-800 dark:text-blue-200 drop-shadow-sm">New Follower!</p>
<p class="text-sm text-blue-700 dark:text-blue-300">John Doe just followed your 'Gaming Stream' channel.</p>
<div class="mt-2 text-xs text-blue-600 dark:text-blue-400">15 minutes ago</div>
<div class="absolute bottom-2 right-2 text-xs text-blue-600/70 dark:text-blue-400/70 font-mono">ID: #2023-D004</div>
</div>
<button aria-label="Close information notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-blue-400/70 hover:bg-blue-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-blue-600/70 dark:hover:bg-blue-700/80">
<svg class="w-5 h-5 text-blue-800 dark:text-blue-200" 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>
<!-- Custom Action/Engagement Notification -->
<div class="relative flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-2xl bg-gradient-to-br from-purple-200 to-pink-200 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-purple-700 dark:to-pink-700 dark:shadow-[0_4px_15px_rgba(200,0,200,0.3)] dark:border dark:border-purple-600 border border-purple-300">
<div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-white flex items-center justify-center shadow-inner-lg shadow-purple-700/50 dark:bg-purple-900 dark:shadow-purple-900/50">
<img src="https://picsum.photos/id/104/50/50" alt="Content thumbnail" class="object-cover w-full h-full border-2 border-purple-400 dark:border-purple-500"/>
</div>
<div class="mt-4 sm:mt-0 sm:ml-4 flex-1">
<p class="text-lg font-bold text-purple-800 dark:text-purple-200 drop-shadow-sm">New Release!</p>
<p class="text-sm text-purple-700 dark:text-purple-300">'The Future's Calling' S02E01 is now available to stream.</p>
<div class="mt-3 flex flex-col sm:flex-row sm:space-x-3 space-y-2 sm:space-y-0 text-right">
<button class="flex-1 px-4 py-2 rounded-xl bg-purple-400 hover:bg-purple-500 text-white font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-purple-600 dark:hover:bg-purple-700 dark:shadow-[0_2px_8px_rgba(150,0,150,0.5)]">
Watch Now
</button>
<button class="flex-1 px-4 py-2 rounded-xl bg-pink-300 hover:bg-pink-400 text-pink-800 font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-100 dark:shadow-[0_2px_8px_rgba(200,0,150,0.5)]">
Add to Watchlist
</button>
</div>
</div>
<button aria-label="Close new release notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-opacity-70 bg-purple-300 hover:bg-purple-400 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-purple-600/70 dark:hover:bg-purple-700/80">
<svg class="w-5 h-5 text-purple-800 dark:text-purple-200" 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>
</div>
</div>
<style>
/* Adding a subtle inset shadow for skeuomorphism */
.shadow-inner-lg {
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2), inset 0px -2px 5px rgba(255, 255, 255, 0.5);
}
.dark .shadow-inner-lg {
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.7), inset 0px -2px 5px rgba(25, 25, 25, 0.2);
}
/* Drop shadow for text for better blending with skeuomorphic elements */
.drop-shadow-sm {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}
.dark .drop-shadow-sm {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
</style>
