Компонент уведомлений

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
    <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Notifications</h2>
            <div class="flex space-x-2">
                <button class="px-4 py-2 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    Mark all as read
                </button>
                <button class="p-2 rounded-full text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                    </svg>
                </button>
            </div>
        </div>

        <div class="divide-y divide-gray-200 dark:divide-gray-700">
            <!-- Notification Item 1 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-blue-50 dark:bg-gray-800/50 hover:bg-blue-100 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
                    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-blue-500"></span>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Alice Johnson</span> commented on your <span class="text-blue-600 dark:text-blue-400 font-medium">post</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">2h ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Great insights! I particularly liked your point about the new design trends..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-blue-600 dark:text-blue-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 2 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-green-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            Your portfolio project <span class="text-indigo-600 dark:text-indigo-400 font-medium">'Modern Dashboard'</span> was approved!
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Congratulations! Your project is now live and visible to the community.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">View Project</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">Share</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 3 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="font-bold">Sarah Lee</span> sent you a <span class="text-purple-600 dark:text-purple-400 font-medium">private message</span>.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        "Hi! I saw your work on the Material Design component and wanted to ask about..."
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-purple-600 dark:text-purple-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">View Message</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">Archive</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 4 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out">
                <div class="relative flex-shrink-0">
                    <div class="h-12 w-12 rounded-full bg-red-500 flex items-center justify-center shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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" />
                        </svg>
                    </div>
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            <span class="text-red-600 dark:text-red-400 font-medium">Warning:</span> Some assets failed to load for 'Photography Showcase'.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">5 days ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        Please check the console for more details. This might affect the display of your project.
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-red-600 dark:text-red-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Resolve Issue</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Ignore</button>
                    </div>
                </div>
            </div>

            <!-- Notification Item 5 -->
            <div class="p-4 sm:p-6 flex items-start space-x-4 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition duration-150 ease-in-out last:rounded-b-lg">
                <div class="relative flex-shrink-0">
                    <img class="h-12 w-12 rounded-full object-cover shadow-sm" src="https://picsum.photos/id/1005/60/60" alt="System Icon">
                </div>
                <div class="flex-1">
                    <div class="flex justify-between items-center">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-100">
                            New <span class="text-cyan-600 dark:text-cyan-400 font-medium">feature update</span> available for the editor.
                        </p>
                        <time class="text-xs text-gray-500 dark:text-gray-400">1 week ago</time>
                    </div>
                    <p class="text-gray-600 dark:text-gray-300 mt-1 text-sm line-clamp-2">
                        We've added new collaboration tools and improved performance. Update now to experience!
                    </p>
                    <div class="mt-2 flex space-x-2 text-sm">
                        <button class="text-cyan-600 dark:text-cyan-400 hover:underline font-medium focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Learn More</button>
                        <button class="text-gray-500 dark:text-gray-400 hover:underline focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-opacity-50">Dismiss</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>