Inbox Notification Panel with Search & Filters

<div class="relative ring-1 ring-neutral-800 overflow-hidden bg-neutral-900 rounded-[20px] shadow-2xl">
      <!-- Status/header -->
      <div class="px-4 pt-4 pb-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <button class="size-8 rounded-lg bg-neutral-850 ring-1 ring-neutral-800 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="grid-2x2-check" class="lucide lucide-grid-2x2-check size-4 text-neutral-300"><path d="M12 3v17a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6a1 1 0 0 1-1 1H3" class=""></path><path d="m16 19 2 2 4-4" class=""></path></svg>
          </button>
          <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="inbox" class="lucide lucide-inbox size-4 text-neutral-300"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" class=""></polyline><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" class=""></path></svg>
            <span class="text-base font-medium text-neutral-200">Inbox</span>
          </div>
        </div>
        <button class="rounded-lg bg-neutral-850 px-3 py-1.5 text-xs font-medium text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">
          Select
        </button>
      </div>

      <!-- Search + categories -->
      <div class="pr-4 pl-4">
        <div class="flex items-center gap-2">
          <div class="flex-1 flex items-center gap-2 rounded-xl bg-neutral-850 ring-1 ring-neutral-800 px-3 py-2.5">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search size-4 text-neutral-400"><path d="m21 21-4.34-4.34" class=""></path><circle cx="11" cy="11" r="8" class=""></circle></svg>
            <input class="w-full bg-transparent placeholder-neutral-500 text-sm focus:outline-none" placeholder="Search">
          </div>
          <button class="size-10 rounded-xl bg-neutral-850 ring-1 ring-neutral-800 flex items-center justify-center hover:ring-neutral-700">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users size-5 text-neutral-300"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><path d="M16 3.128a4 4 0 0 1 0 7.744" class=""></path><path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
          </button>
        </div>

        <div class="flex gap-2 overflow-x-auto no-scrollbar mt-3 pt-1 pr-[1px] pb-1 pl-[1px] items-center" style="scrollbar-width: none;">
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800">Primary</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-violet-600 text-white shadow-sm">Notifications</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800">Updates</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800">Social</button>
        </div>

        <!-- Highlight card -->
        <div class="mt-3 rounded-2xl bg-violet-600/10 ring-1 ring-violet-500/30 p-4">
          <div class="flex items-start gap-3">
            <div class="size-9 rounded-xl bg-violet-500/30 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell size-5 text-violet-300"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
            </div>
            <div class="min-w-0">
              <p class="text-sm font-medium text-neutral-100">Feeds &amp; Alerts</p>
              <p class="text-[13px] text-neutral-300">A single place for announcements, newsletters, and social updates.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Lists -->
      <div class="mt-4 space-y-6">
        <!-- Pinned -->
        <div class="px-4">
          <div class="flex items-center justify-between py-2">
            <div class="flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star size-4 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
              <span class="text-[13px] font-medium text-neutral-300">Pinned <span class="ml-1 rounded-md bg-neutral-850 px-1.5 py-0.5 text-[11px] text-neutral-400 ring-1 ring-neutral-800">2</span></span>
            </div>
            <button class="size-7 rounded-lg bg-neutral-850 ring-1 ring-neutral-800 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus size-4 text-neutral-300"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
            </button>
          </div>
        </div>

        <!-- Notifications -->
        <div class="pr-4 pl-4">
          <div class="flex items-center gap-2 py-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell size-4 text-violet-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
            <p class="text-[13px] font-medium text-neutral-300">Notifications <span class="ml-1 rounded-md bg-neutral-850 px-1.5 py-0.5 text-[11px] text-neutral-400 ring-1 ring-neutral-800">33</span></p>
          </div>

          <ul class="space-y-0">
            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-neutral-800 ring-1 ring-neutral-700 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="x" class="lucide lucide-x size-5 text-neutral-200"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
              </div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">Orbit</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">26 people reposted your update</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell-ring" class="lucide lucide-bell-ring size-4 text-violet-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M22 8c0-2.3-.8-4.3-2-6" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path><path d="M4 2C2.8 3.7 2 5.7 2 8" class=""></path></svg>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-red-500 text-white flex items-center justify-center font-medium">S</div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">StreamBox</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Channel "Pixel Point" just uploaded a video</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell-ring" class="lucide lucide-bell-ring size-4 text-violet-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M22 8c0-2.3-.8-4.3-2-6" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path><path d="M4 2C2.8 3.7 2 5.7 2 8" class=""></path></svg>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-neutral-800 ring-1 ring-neutral-700 flex items-center justify-center">
                <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&amp;w=80&amp;auto=format&amp;fit=crop" class="size-10 rounded-full object-cover" alt="">
              </div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">ReadingList</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">10 ways to improve your focus</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell-ring" class="lucide lucide-bell-ring size-4 text-violet-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M22 8c0-2.3-.8-4.3-2-6" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path><path d="M4 2C2.8 3.7 2 5.7 2 8" class=""></path></svg>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-emerald-500 text-white flex items-center justify-center font-medium">T</div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">TechWire</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Daily digest: top 5 stories</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell-ring" class="lucide lucide-bell-ring size-4 text-violet-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M22 8c0-2.3-.8-4.3-2-6" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path><path d="M4 2C2.8 3.7 2 5.7 2 8" class=""></path></svg>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-orange-500 text-white flex items-center justify-center font-medium">M</div>
              <div class="min-w-0 flex-1">
                <div class="flex items-center justify-between">
                  <p class="truncate text-sm font-medium text-neutral-200">MotionKit</p>
                  
                </div>
                <p class="truncate text-[13px] text-neutral-400">Weekly newsletter: design trends</p>
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell-ring" class="lucide lucide-bell-ring size-4 text-violet-400"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M22 8c0-2.3-.8-4.3-2-6" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path><path d="M4 2C2.8 3.7 2 5.7 2 8" class=""></path></svg>
            </li>
          </ul>
        </div>
      </div>

      <!-- Bottom bar -->
      <div class="absolute bottom-0 left-0 right-0 pb-[env(safe-area-inset-bottom)]">
        <div class="mx-4 mb-4 flex items-center justify-between">
          <div class="flex-1">
            <div class="w-full max-w-[240px] ring-1 ring-neutral-800 text-[13px] text-neutral-300 text-center bg-neutral-900 rounded-full mr-auto ml-auto pt-1.5 pr-3 pb-1.5 pl-3">
              Unread Emails <span class="ml-1 rounded-md bg-neutral-800 px-1.5 py-0.5 text-[11px]">31</span>
            </div>
          </div>
          <div class="flex items-center gap-2">
            <button class="size-10 ring-1 ring-neutral-800 flex bg-neutral-900 rounded-xl items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="archive" class="lucide lucide-archive size-5 text-neutral-300"><rect width="20" height="5" x="2" y="3" rx="1" class=""></rect><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" class=""></path><path d="M10 12h4" class=""></path></svg>
            </button>
            <button class="size-10 ring-1 ring-neutral-800 flex bg-neutral-900 rounded-xl items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="square-pen" class="lucide lucide-square-pen size-5 text-neutral-300"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" class=""></path><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" class=""></path></svg>
            </button>
          </div>
        </div>
      </div>
    </div>