Notifications Component

    <div class="relative min-h-screen bg-stone-100 dark:bg-stone-900 font-mono p-8">

        <!-- Notifications Container -->
        <div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 bg-stone-300 dark:bg-stone-800 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#E0E0E0] p-6 md:p-10">

            <div class="flex justify-between items-center mb-8 pb-4 border-b-4 border-stone-900 dark:border-stone-100">
                <h1 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-stone-100 uppercase tracking-tighter">
                    Inbox (4)
                </h1>
                <div class="relative">
                    <select class="block appearance-none bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 py-3 px-6 pr-8 rounded-none leading-tight focus:outline-none focus:bg-stone-700 dark:focus:bg-stone-300 focus:border-stone-700 dark:focus:border-stone-300 border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                        <option>Filter By</option>
                        <option>All</option>
                        <option>Unread</option>
                        <option>Archived</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-100 dark:text-stone-900">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                    </div>
                </div>
            </div>

            <!-- Notification Item 1 -->
            <div class="mb-6 p-6 border-4 border-stone-900 dark:border-stone-100 bg-stone-200 dark:bg-stone-700 shadow-[8px_8px_0_0_#9E9D24] dark:shadow-[8px_8px_0_0_#DCE775] transition-all duration-300 hover:shadow-[12px_12px_0_0_#9E9D24] dark:hover:shadow-[12px_12px_0_0_#DCE775] relative">
                <div class="absolute -top-3 -right-3 bg-red-600 dark:bg-red-400 text-white dark:text-stone-900 text-xs px-3 py-1 font-bold">NEW</div>
                <div class="flex items-start mb-4">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-stone-900 dark:border-stone-100 mr-4 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                    <div>
                        <h3 class="text-xl md:text-2xl font-bold text-stone-800 dark:text-stone-200 mb-1">Project Updates - Critical!</h3>
                        <p class="text-stone-600 dark:text-stone-400 text-sm">From: John Doe <span class="ml-2 text-stone-500 dark:text-stone-500 text-xs">2 hours ago</span></p>
                    </div>
                </div>
                <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-4">
                    Hey team, urgent update on the