Task List Panel with Search, Filter & AI Suggestion

<div class="sm:px-6 mx-auto px-4" style="max-width: 900px">
  <div class="mt-16 md:mt-20" style="">
    <div
      class="relative rounded-2xl border border-white/10 bg-[#0e0a1d]/80 shadow-2xl ring-1 ring-white/10 backdrop-blur overflow-hidden">
      <!-- Top Glow -->
      <div
        class="pointer-events-none absolute -top-6 left-1/2 h-16 w-[80%] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,rgba(168,85,247,0.4),rgba(0,0,0,0))] blur-2xl">
      </div>

      <!-- App Header -->
      <div class="flex items-center justify-between px-4 sm:px-6 py-3.5 border-b border-white/10">
        <div class="flex items-center gap-3">
          <span class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-b from-violet-500 to-fuchsia-600 ring-1 ring-white/10">
                <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" class="h-4 w-4 text-white"><path d="M8 6h13" class=""></path><path d="M8 12h13" class=""></path><path d="M8 18h13" class=""></path><path d="M3 6h.01" class=""></path><path d="M3 12h.01" class=""></path><path d="M3 18h.01" class=""></path></svg>
              </span>
          <div class="">
            <p class="text-sm font-semibold text-white tracking-tight">My Tasks</p>
            <p class="text-[11px] text-slate-400">8 tasks today</p>
          </div>
        </div>

        <div class="flex items-center gap-2">
          <div class="hidden md:flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 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"
              class="h-4 w-4 text-slate-300">
              <path d="m21 21-4.34-4.34" class=""></path>
              <circle cx="11" cy="11" r="8" class=""></circle>
            </svg>
            <input type="text" placeholder="Search tasks..." class="w-48 bg-transparent text-sm placeholder:text-slate-400 focus:outline-none text-slate-200">
          </div>
          <button class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-slate-200 hover:bg-white/10 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" class="h-4 w-4"><path d="M4.8 4.8h14.4v14.4H4.8z" class=""></path><path d="M8.16 6.65H15.83C16.47 6.65 16.99 7.17 16.99 7.81V9.09C16.99 9.56 16.7 10.14 16.41 10.43L13.91 12.64C13.56 12.93 13.33 13.51 13.33 13.98V16.48C13.33 16.83 13.1 17.29 12.81 17.47L12 17.98C11.24 18.45 10.2 17.92 10.2 16.99V13.91C10.2 13.5 9.97 12.98 9.73 12.69L7.52 10.36C7.23 10.08 7 9.55 7 9.2V7.87C7 7.17 7.52 6.65 8.16 6.65Z" class=""></path></svg>
                <span class="hidden sm:inline">Filter</span>
              </button>
          <button class="inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-violet-500 to-fuchsia-600 px-3 py-2 text-sm font-medium text-white ring-1 ring-white/10 hover:shadow-lg hover:shadow-fuchsia-500/20 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" class="h-4 w-4"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                <span class="hidden sm:inline">New Task</span>
              </button>
        </div>
      </div>

      <!-- App Body -->
      <div class="sm:p-6 pt-4 pr-4 pb-4 pl-4 space-y-3">
        <!-- Task Item 1 -->
        <div
          class="flex items-start gap-3 p-4 rounded-xl border border-white/10 bg-white/5 hover:bg-white/[0.07] transition group">
          <input type="checkbox" class="mt-1 h-4 w-4 accent-violet-500 cursor-pointer">
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-1">
              <h3 class="text-sm font-medium text-slate-200">Review Q4 product roadmap</h3>
              <span class="inline-flex items-center gap-1 rounded-full bg-rose-500/10 px-2 py-0.5 text-[10px] font-medium text-rose-300 ring-1 ring-rose-500/20">
                    <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" class="h-2.5 w-2.5"><circle cx="12" cy="12" r="10" class=""></circle><polyline points="12 6 12 12 16 14" class=""></polyline></svg>
                    High Priority
                  </span>
            </div>
            <p class="text-xs text-slate-400 mb-2">Finalize features and timelines with the product team</p>
            <div class="flex items-center gap-3 text-[11px] text-slate-500">
              <span class="flex items-center gap-1">
                    <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" class="h-3 w-3"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
                    Today, 2:00 PM
                  </span>
              <span class="flex items-center gap-1">
                    <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" class="h-3 w-3"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
                    Product
                  </span>
            </div>
          </div>
          <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&amp;w=64&amp;auto=format&amp;fit=crop" class="h-8 w-8 rounded-full ring-1 ring-white/10 object-cover" alt="">
        </div>

        <!-- Task Item 2 -->
        <div
          class="flex items-start gap-3 p-4 rounded-xl border border-white/10 bg-white/5 hover:bg-white/[0.07] transition group">
          <input type="checkbox" class="mt-1 h-4 w-4 accent-violet-500 cursor-pointer">
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-1">
              <h3 class="text-sm font-medium text-slate-200">Update design system documentation</h3>
              <span class="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-300 ring-1 ring-amber-500/20">
                    <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" class="h-2.5 w-2.5"><circle cx="12" cy="12" r="10" class=""></circle><polyline points="12 6 12 12 16 14" class=""></polyline></svg>
                    Medium
                  </span>
            </div>
            <p class="text-xs text-slate-400 mb-2">Add new component examples and usage guidelines</p>
            <div class="flex items-center gap-3 text-[11px] text-slate-500">
              <span class="flex items-center gap-1">
                    <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" class="h-3 w-3"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
                    Tomorrow, 10:00 AM
                  </span>
              <span class="flex items-center gap-1">
                    <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" class="h-3 w-3"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
                    Design
                  </span>
            </div>
          </div>
          <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&amp;w=64&amp;auto=format&amp;fit=crop" class="h-8 w-8 rounded-full ring-1 ring-white/10 object-cover" alt="">
        </div>

        <!-- Task Item 3 -->
        <div
          class="flex items-start gap-3 p-4 rounded-xl border border-white/10 bg-white/5 hover:bg-white/[0.07] transition group">
          <input type="checkbox" checked="" class="mt-1 h-4 w-4 accent-violet-500 cursor-pointer">
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-1">
              <h3 class="text-sm font-medium text-slate-400 line-through">Schedule team standup meeting</h3>
            </div>
            <p class="text-xs text-slate-500 mb-2">Send calendar invites to all team members</p>
            <div class="flex items-center gap-3 text-[11px] text-slate-500">
              <span class="flex items-center gap-1">
                    <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" class="h-3 w-3"><path d="M8 2v4" class=""></path><path d="M16 2v4" class=""></path><rect width="18" height="18" x="3" y="4" rx="2" class=""></rect><path d="M3 10h18" class=""></path></svg>
                    Yesterday
                  </span>
              <span class="flex items-center gap-1 text-emerald-400">
                    <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" class="h-3 w-3"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                    Completed
                  </span>
            </div>
          </div>
          <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&amp;w=64&amp;auto=format&amp;fit=crop" class="h-8 w-8 rounded-full ring-1 ring-white/10 object-cover" alt="">
        </div>

        <!-- AI Suggestion Card -->
        <div class="p-4 rounded-xl border border-dashed border-violet-400/30 bg-violet-500/5">
          <div class="flex items-start gap-3">
            <div
              class="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-b from-violet-500 to-fuchsia-600 ring-1 ring-white/10">
              <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"
                class="h-4 w-4 text-white">
                <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>
            </div>
            <div class="flex-1">
              <p class="text-sm font-medium text-violet-200 mb-1">AI Suggestion</p>
              <p class="text-xs text-slate-300 mb-3">Based on your schedule, the best time to work on "Design system
                documentation" is tomorrow at 10:00 AM when you have a 2-hour focus block.</p>
              <div class="flex items-center gap-2">
                <button class="inline-flex items-center gap-1.5 rounded-lg bg-violet-500/20 px-3 py-1.5 text-xs font-medium text-violet-200 hover:bg-violet-500/30 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" class="h-3 w-3"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                      Apply Suggestion
                    </button>
                <button class="text-xs text-slate-400 hover:text-slate-300 transition">Dismiss</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Stats Footer -->
        <div class="flex items-center justify-between pt-2">
          <div class="flex items-center gap-4 text-xs text-slate-400">
            <span class="flex items-center gap-1.5">
                  <span class="h-2 w-2 rounded-full bg-emerald-400"></span>
            <span class="text-slate-300 font-medium">5</span> completed today
            </span>
            <span class="flex items-center gap-1.5">
                  <span class="h-2 w-2 rounded-full bg-violet-400"></span>
            <span class="text-slate-300 font-medium">3</span> in progress
            </span>
          </div>
          <button class="inline-flex items-center gap-1.5 text-xs text-slate-400 hover:text-slate-200 transition">
                View all tasks
                <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" class="h-3 w-3"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
              </button>
        </div>
      </div>
    </div>
  </div>
</div>