Tailwind Inbox Dashboard UI Mockup

<main class="max-w-6xl sm:px-6 mr-auto ml-auto pt-6 pr-4 pb-6 pl-4">
  <header class="mb-6 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <div class="size-8 rounded-xl bg-neutral-900 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="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>
      </div>
      <h1 class="text-[22px] tracking-tight font-semibold text-neutral-100">Inbox</h1>
    </div>
    <div class="flex items-center gap-2">
      <button class="hidden sm:flex items-center gap-2 rounded-lg bg-neutral-900 px-3 py-2 text-sm font-medium text-neutral-200 ring-1 ring-neutral-800 hover:bg-neutral-850 hover:ring-neutral-700 transition">
        <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="sparkles" class="lucide lucide-sparkles size-4 text-neutral-300"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
        <span>Smart Sort</span>
      </button>
      <button class="flex items-center gap-2 rounded-lg bg-neutral-900 px-3 py-2 text-sm font-medium text-neutral-200 ring-1 ring-neutral-800 hover:bg-neutral-850 hover:ring-neutral-700 transition">
        <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="check-square" class="lucide lucide-check-square size-4 text-neutral-300"><path d="M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344" class=""></path><path d="m9 11 3 3L22 4" class=""></path></svg>
        <span>Select</span>
      </button>
    </div>
  </header>

  <section class="grid grid-cols-1 md:grid-cols-2 gap-5">
    <!-- Phone 1 -->
    <div class="relative rounded-[20px] bg-neutral-900 ring-1 ring-neutral-800 overflow-hidden 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="menu" class="lucide lucide-menu size-4 text-neutral-300"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" 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 + quick actions -->
      <div class="px-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="filter" class="lucide lucide-filter size-5 text-neutral-300"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z" class=""></path></svg>
          </button>
        </div>

        <!-- Category chips -->
        <div class="flex gap-2 overflow-x-auto no-scrollbar mt-3 py-1 items-center" style="scrollbar-width: none;">
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-blue-600/90 text-white shadow-sm">Primary</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">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 hover:ring-neutral-700">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 hover:ring-neutral-700">Social</button>
          <button class="px-4 py-2 text-sm font-medium rounded-full bg-neutral-850 text-neutral-300 ring-1 ring-neutral-800 hover:ring-neutral-700">Promos</button>
        </div>
      </div>

      <!-- List -->
      <div class="mt-4 space-y-6">
        <!-- Section: 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>
            </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 class="space-y-2">
            <!-- Pinned Item -->
            <article class="group rounded-2xl bg-blue-600/10 ring-1 ring-blue-500/30 p-4">
              <div class="flex items-center gap-3">
                <img src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?q=80&amp;w=80&amp;auto=format&amp;fit=crop" class="size-10 rounded-full object-cover" alt="">
                <div class="min-w-0 flex-1">
                  <div class="flex items-center justify-between gap-2">
                    <p class="truncate text-sm font-medium text-neutral-100">Ari Tan • Design Ops</p>

                  </div>
                  <p class="truncate text-[13px] text-neutral-300">Draft handoff recap — please review sections 3–5</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="pin" class="lucide lucide-pin size-4 text-neutral-400">
                  <path d="M12 17v5" class=""></path>
                  <path
                    d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"
                    class=""></path>
                </svg>
              </div>
            </article>

            <article class="group rounded-2xl bg-blue-600/10 ring-1 ring-blue-500/30 p-4">
              <div class="flex items-center gap-3">
                <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&amp;w=80&amp;auto=format&amp;fit=crop" class="size-10 rounded-full object-cover" alt="">
                <div class="min-w-0 flex-1">
                  <div class="flex items-center justify-between gap-2">
                    <p class="truncate text-sm font-medium text-neutral-100">Sam &amp; Nova</p>

                  </div>
                  <p class="truncate text-[13px] text-neutral-300">Q3 roadmap sync — next steps and owners</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="alert-triangle" class="lucide lucide-alert-triangle size-4 text-amber-400">
                  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path>
                  <path d="M12 9v4" class=""></path>
                  <path d="M12 17h.01" class=""></path>
                </svg>
              </div>
            </article>
          </div>
        </div>

        <!-- Section: Primary -->
        <div class="px-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="zap"
              class="lucide lucide-zap size-4 text-blue-400">
              <path
                d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
                class=""></path>
            </svg>
            <p class="text-[13px] font-medium text-neutral-300">Primary
              <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">196</span>
            </p>
          </div>

          <ul class="space-y-0">
            <li class="flex items-center gap-3 py-3">
              <div
                class="size-10 rounded-full bg-gradient-to-br from-orange-500 to-amber-600 text-white flex items-center justify-center font-medium">
                F</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">ForgeLabs</p>

                </div>
                <p class="truncate text-[13px] text-neutral-400">Deploy failed on main • action #2189</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="shield-alert" class="lucide lucide-shield-alert size-4 text-emerald-400">
                <path
                  d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
                  class=""></path>
                <path d="M12 8v4" class=""></path>
                <path d="M12 16h.01" class=""></path>
              </svg>
            </li>

            <li class="flex gap-3 pt-3 pb-3 items-center">
              <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-1494790108377-be9c29b29330?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">Nimbus Cloud</p>

                </div>
                <p class="truncate text-[13px] text-neutral-400">Security update on your account</p>
              </div>
              <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="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>
                <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="triangle-alert" class="lucide lucide-triangle-alert size-4 text-amber-400">
                  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path>
                  <path d="M12 9v4" class=""></path>
                  <path d="M12 17h.01" class=""></path>
                </svg>
              </div>
            </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-1502685104226-ee32379fefbe?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">Atlas UI</p>

                </div>
                <p class="truncate text-[13px] text-neutral-400">Edit request — component tokens</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="user-round-check" class="lucide lucide-user-round-check size-4 text-emerald-400">
                <path d="M2 21a8 8 0 0 1 13.292-6" class=""></path>
                <circle cx="10" cy="8" r="5" class=""></circle>
                <path d="m16 19 2 2 4-4" class=""></path>
              </svg>
            </li>

            <li class="flex items-center gap-3 py-3">
              <div class="size-10 rounded-full bg-indigo-500 text-white flex items-center justify-center font-medium">Z
              </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">ZenChat</p>

                </div>
                <p class="truncate text-[13px] text-neutral-400">Payment received • Team Plus</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="badge-check" class="lucide lucide-badge-check size-4 text-emerald-400">
                <path
                  d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
                  class=""></path>
                <path d="m9 12 2 2 4-4" 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 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1621619856624-42fd193a0661?w=1080&amp;q=80" alt="" class="size-10 object-cover">
              </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">PixelDrop</p>

                </div>
                <p class="truncate text-[13px] text-neutral-400">Thanks for joining — starter pack inside</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="download" class="lucide lucide-download size-4 text-cyan-400">
                <path d="M12 15V3" class=""></path>
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
                <path d="m7 10 5 5 5-5" class=""></path>
              </svg>
            </li>
          </ul>
        </div>
      </div>

      <!-- Bottom bar -->

    </div>

    <!-- Phone 2 -->
    <div class="relative rounded-[20px] bg-neutral-900 ring-1 ring-neutral-800 overflow-hidden 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="px-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="mx-auto w-full max-w-[240px] rounded-full bg-neutral-900 ring-1 ring-neutral-800 px-3 py-1.5 text-center text-[13px] text-neutral-300">
              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 rounded-xl bg-neutral-875 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="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 rounded-xl bg-neutral-875 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="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>
  </section>
</main>