dashboardlayouttailwindresponsivechatcode-previewdark-themeui
AI Code Generator Dashboard Layout

Шаблон дашборда для AI-генератора кода. Темный, стекловидный UI с чатом, предпросмотром кода и экспортом. Адаптивный, на Tailwind CSS.
Live Preview
Prompt

<div
  class="[animation:fadeSlideIn_0.9s_ease-out_0.5s_both] sm:px-6 lg:overflow-visible lg:pb-0 lg:pl-8 lg:pr-8 mt-24 mb-24 pr-8 pb-0 pl-8 max-w-7xl flex items-center justify-center min-h-screen"
  style="mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent); 
         -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 30%, transparent);">

  <div class="sm:p-3 bg-neutral-950 border border-neutral-800 rounded-3xl pt-2 pr-2 pb-2 pl-2 relative">
    <!-- subtle space glow -->


    <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 sm:gap-4 relative gap-x-3 gap-y-3">
      <!-- Left Sidebar -->
      <aside
        class="lg:col-span-3 flex flex-col bg-neutral-900/60 ring-neutral-800 ring-1 rounded-2xl pt-4 pr-4 pb-4 pl-4">
        <div class="flex items-center justify-between">
          <div class="inline-flex items-center gap-2">
            <span class="text-white text-sm font-medium tracking-tight font-geist">
                      DesignFlow
                    </span>
          </div>
          <button class="inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-neutral-800 transition text-neutral-300 ring-1 ring-neutral-800">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                      <path d="M4 12h16" class=""></path>
                      <path d="M4 6h16" class=""></path>
                      <path d="M4 18h16" class=""></path>
                    </svg>
                  </button>
        </div>

        <div class="mt-4 flex items-center gap-3">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/57ff8f09-a1ef-4c2d-a129-c6e65a08af58_320w.jpg" alt="Avatar" class="w-8 h-8 object-cover ring-neutral-700 ring-1 rounded-full">
          <div class="">
            <p class="text-white text-sm font-medium tracking-tight font-geist">
              Alex Chen
            </p>
            <p class="text-neutral-400 text-xs font-geist">Lead Developer</p>
          </div>
        </div>

        <div class="mt-4">
          <div class="flex items-center gap-2 bg-neutral-900 ring-1 ring-neutral-800 rounded-xl px-3 py-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-400" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5">
              <circle cx="11" cy="11" r="8" class=""></circle>
              <path d="m21 21-4.3-4.3" class=""></path>
            </svg>
            <input type="text" placeholder="Search designs..." class="w-full bg-transparent outline-none text-sm text-neutral-200 placeholder-neutral-500">
          </div>
        </div>

        <div class="mt-6">
          <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 mb-2 font-geist">
            Navigation
          </p>
          <nav class="space-y-1">
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition font-geist"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <rect x="3" y="3" width="7" height="7" rx="1" class=""></rect>
                <rect x="14" y="3" width="7" height="7" rx="1" class=""></rect>
                <rect x="14" y="14" width="7" height="7" rx="1" class=""></rect>
                <rect x="3" y="14" width="7" height="7" rx="1" class=""></rect>
              </svg>
              Dashboard
            </a>
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-100 bg-neutral-800 ring-1 ring-neutral-700 font-geist"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-400" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <polyline points="16 18 22 12 16 6" class=""></polyline>
                <polyline points="8 6 2 12 8 18" class=""></polyline>
              </svg>
              Code Generator
            </a>
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition font-geist"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path d="M12 2 2 7l10 5 10-5z" class=""></path>
                <path d="m2 17 10 5 10-5" class=""></path>
                <path d="m2 12 10 5 10-5" class=""></path>
              </svg>
              Components
            </a>
            <a class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-neutral-300 hover:bg-neutral-800 transition font-geist"
              href="#">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="1.5">
                <path
                  d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
                  class="">
                </path>
              </svg>
              Integrations
            </a>
          </nav>
        </div>

        <div class="mt-6">
          <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-500 mb-2 font-geist">
            Recent Projects
          </p>
          <ul class="space-y-1 text-sm">
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
              E-commerce dashboard redesign
            </li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
              SaaS landing page template
            </li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
              Mobile app UI conversion
            </li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
              Design system components
            </li>
            <li class="px-3 py-2 rounded-lg text-neutral-300 hover:bg-neutral-800 transition font-geist">
              React component library
            </li>
          </ul>
        </div>

        <div class="mt-auto pt-4">
          <div
            class="relative overflow-hidden rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-950 ring-1 ring-neutral-800 p-4">
            <div class="absolute inset-x-0 -top-6 h-14 bg-gradient-to-b from-blue-500/10 to-transparent"></div>
            <p class="text-sm text-white font-medium tracking-tight font-geist">
              Upgrade to Pro
            </p>
            <p class="text-xs text-neutral-400 mt-1 font-geist">
              Unlock advanced features and ship 10x faster
            </p>
            <div class="flex items-center gap-2 mt-3">
              <img class="w-6 h-6 object-cover ring-neutral-700 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fa45d691-5e28-4ddb-8f86-2fe1444c0306_320w.jpg" alt="">
              <img class="w-6 h-6 object-cover ring-neutral-700 ring-1 rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/548251c7-a97a-4c25-8e2d-79f4498b49e0_320w.jpg" alt="">
              <img class="ring-1 ring-neutral-700 w-6 h-6 object-cover rounded-full" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/1798060b-f297-4981-a4f3-745854800fb8_320w.jpg" alt="">
              <button class="ml-auto inline-flex items-center gap-2 text-xs text-white bg-blue-500 hover:bg-blue-400 transition rounded-full px-3 py-1.5 ring-1 ring-blue-400 font-geist">
                        Upgrade now
                      </button>
            </div>
          </div>
        </div>
      </aside>

      <!-- Main Creative Area -->
      <main
        class="lg:col-span-6 bg-neutral-900/60 ring-1 ring-neutral-800 rounded-2xl p-4 sm:p-6 relative overflow-hidden">
        <!-- stars -->
        <div class="pointer-events-none absolute inset-0">
          <div class="absolute left-10 top-8 w-1 h-1 rounded-full bg-white/20"></div>
          <div class="absolute left-1/3 top-14 w-1 h-1 rounded-full bg-white/30"></div>
          <div class="absolute right-16 top-10 w-1 h-1 rounded-full bg-white/20"></div>
          <div class="absolute right-1/4 top-1/3 w-1 h-1 rounded-full bg-white/30"></div>
          <div class="absolute left-1/4 bottom-12 w-1 h-1 rounded-full bg-white/20"></div>
        </div>

        <header class="flex items-start justify-between">
          <div class="">
            <h2 class="text-xl sm:text-2xl text-white font-geist font-light tracking-tighter" style="">
              AI Code Generator
            </h2>
            <p class="text-sm text-neutral-400 mt-1 font-geist">
              Transform your design files into production-ready code
              instantly
            </p>
          </div>
          <div class="inline-flex items-center gap-2">
            <button class="w-8 h-8 rounded-lg ring-1 ring-neutral-800 hover:bg-neutral-800 text-neutral-300 inline-flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <circle cx="12" cy="12" r="1" class=""></circle>
                        <circle cx="19" cy="12" r="1" class=""></circle>
                        <circle cx="5" cy="12" r="1" class=""></circle>
                      </svg>
                    </button>
          </div>
        </header>

        <div
          class="mt-4 rounded-2xl bg-gradient-to-b from-neutral-900 to-neutral-950 ring-1 ring-neutral-800 p-4 sm:p-6 relative">
          <div class="absolute inset-0 rounded-2xl ring-1 ring-white/5 pointer-events-none"></div>

          <div class="flex items-center justify-between">
            <span class="inline-flex items-center gap-2 text-[11px] text-neutral-300 bg-neutral-800/70 rounded-full px-3 py-1 ring-1 ring-neutral-700 font-geist">
                      <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
            Design Input
            </span>
            <div class="inline-flex items-center gap-2">
              <button class="w-8 h-8 inline-flex items-center justify-center rounded-full ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                          <path d="m15 18-6-6 6-6" class=""></path>
                        </svg>
                      </button>
              <button class="w-8 h-8 inline-flex items-center justify-center rounded-full ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                          <path d="m9 18 6-6-6-6" class=""></path>
                        </svg>
                      </button>
            </div>
          </div>

          <!-- Prompt bubble -->
          <div class="max-w-xl mt-4 mb-6 ml-auto">
            <div
              class="rounded-2xl bg-neutral-800/80 ring-1 ring-neutral-700 text-sm text-neutral-200 px-4 py-3 font-geist"
              style="">
              Convert this Figma dashboard design into a responsive
              React component with Tailwind CSS. Include proper
              component structure, state management, and ensure it's
              mobile-first with clean, maintainable code.
            </div>
          </div>

          <!-- Card carousel -->
          <div class="w-full mx-auto">
            <div class="grid grid-cols-1 items-stretch justify-stretch">
              <div class="relative z-10 group">
                <!-- Simplified single glass container -->
                <div
                  class="w-full h-full min-h-[280px] rounded-2xl overflow-hidden bg-zinc-900/60 backdrop-blur ring-1 ring-white/10 shadow-[0_4px_20px_rgba(0,0,0,0.3)]">
                  <!-- Inner content -->
                  <div class="p-5 h-full flex flex-col">
                    <!-- Header -->
                    <div class="flex items-center justify-between mb-4">
                      <span class="text-sm text-white font-medium tracking-tight font-geist">
                                Dashboard.tsx
                              </span>
                      <span class="inline-flex items-center gap-1 text-[10px] text-blue-200 bg-blue-900/40 rounded-full px-2 py-0.5 ring-1 ring-blue-600 font-geist">
                                <span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
                      Active
                      </span>
                    </div>

                    <!-- Code Area -->
                    <div
                      class="flex-1 bg-zinc-950/80 rounded-xl p-4 font-mono text-xs space-y-1.5 overflow-auto ring-1 ring-white/5">
                      <div class="text-rose-300 font-geist">
                        export default function Dashboard() {'{'}
                      </div>
                      <div class="text-emerald-300 pl-4 font-geist">
                        const [data, setData] = useState([]);
                      </div>
                      <div class="text-sky-300 pl-4 font-geist">
                        useEffect(() =&gt; {'{'}
                      </div>
                      <div class="text-amber-200 pl-8 font-geist">
                        fetchData();
                      </div>
                      <div class="text-sky-300 pl-4 font-geist">{'}'}, []);</div>
                      <div class="text-violet-300 pl-4 font-geist">return (</div>
                      <div class="text-zinc-400 pl-8 font-geist">
                        &lt;Layout&gt;
                      </div>
                      <div class="text-zinc-400 pl-12 font-geist">
                        &lt;Grid data={data} /&gt;
                      </div>
                      <div class="text-zinc-400 pl-8 font-geist">
                        &lt;/Layout&gt;
                      </div>
                      <div class="text-violet-300 pl-4 font-geist">);</div>
                      <div class="text-rose-300 font-geist">{'}'}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Response bubble -->
          <div class="mt-6 max-w-xl">
            <div
              class="rounded-2xl bg-neutral-800/80 ring-1 ring-neutral-700 text-sm text-neutral-200 px-4 py-3 font-geist">
              Perfect! I've generated production-ready React components
              with Tailwind CSS. The code includes responsive
              breakpoints, proper TypeScript types, and follows best
              practices. Ready to copy and use immediately.
            </div>
          </div>

          <!-- tags -->
          <div class="mt-4 flex items-center gap-2 flex-wrap">
            <span class="inline-flex items-center gap-2 text-xs text-blue-300 bg-blue-900/30 rounded-full px-3 py-1 ring-1 ring-blue-700 font-geist">
                      React + TypeScript
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="m20 6-11 11-5-5" class=""></path>
                      </svg>
                    </span>
            <span class="inline-flex items-center gap-2 text-xs text-blue-300 bg-blue-900/30 rounded-full px-3 py-1 ring-1 ring-blue-700 font-geist">
                      Tailwind CSS
                      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <rect x="3" y="3" width="14" height="18" rx="2" class=""></rect>
                        <path d="M7 7h6" class=""></path>
                        <path d="M7 11h6" class=""></path>
                      </svg>
                    </span>
          </div>
        </div>

        <!-- Creative Tools -->
        <div class="mt-4 flex items-end gap-3">
          <div class="flex-1 rounded-2xl bg-neutral-900 ring-1 ring-neutral-800 px-3 py-2">
            <div class="flex items-center gap-2">
              <button class="inline-flex hover:text-blue-400 transition text-neutral-400 w-8 h-8 items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                          <rect x="3" y="3" width="18" height="18" rx="2" ry="2" class=""></rect>
                          <circle cx="9" cy="9" r="2" class=""></circle>
                          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path>
                        </svg>
                      </button>
              <input type="text" placeholder="Upload your design file or paste URL..." class="flex-1 bg-transparent outline-none text-sm text-neutral-200 placeholder-neutral-500">
            </div>
          </div>
          <button class="w-12 h-12 rounded-2xl bg-blue-500 hover:bg-blue-400 transition ring-1 ring-blue-400 inline-flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                      <path d="m12 2 3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z" class=""></path>
                    </svg>
                  </button>
        </div>

        <p class="mt-2 text-[11px] text-neutral-500 font-geist">
          DesignFlow generates clean, production-ready code. Your
          designs are processed securely and never stored.
        </p>
      </main>

      <!-- Right Sidebar -->
      <aside
        class="lg:col-span-3 flex flex-col bg-neutral-900/60 ring-neutral-800 ring-1 rounded-2xl pt-4 pr-4 pb-4 pl-4">
        <div class="flex items-center justify-between">
          <span class="inline-flex items-center gap-2 text-xs text-blue-200 bg-blue-900/40 rounded-full px-3 py-1 ring-1 ring-blue-700 font-geist">
                    <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
          DesignFlow Pro
          </span>
          <button class="w-8 h-8 inline-flex items-center justify-center rounded-lg ring-1 ring-neutral-800 text-neutral-300 hover:bg-neutral-800">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                      <path d="M12 3v18" class=""></path>
                      <path d="M3 12h18" class=""></path>
                    </svg>
                  </button>
        </div>

        <div class="mt-4 flex items-center gap-6">
          <button class="relative text-sm text-white">
                    <span class="font-geist">EXPORTS</span>
                    <span class="absolute -bottom-2 left-0 right-0 h-0.5 bg-white rounded-full"></span>
                  </button>
          <button class="text-sm text-neutral-500 font-geist">SETTINGS</button>
        </div>

        <div class="mt-6">
          <div class="flex items-center gap-2 mb-2">
            <p class="text-sm text-neutral-300 font-medium tracking-tight font-geist">
              Active Conversions
            </p>
            <span class="inline-flex items-center text-[11px] text-black bg-blue-400 rounded-full px-2 py-0.5 ring-1 ring-blue-300 font-geist">
                      Live
                    </span>
          </div>

          <div class="space-y-2">
            <!-- Project 1 -->
            <label class="flex items-start gap-3 p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900 hover:bg-neutral-800 transition cursor-pointer">
                      <span class="relative w-4 h-4 rounded-md ring-1 ring-neutral-700 bg-neutral-900"></span>
                      <div class="flex-1">
                        <p class="text-sm text-neutral-200 font-geist">
                          Landing page components
                        </p>
                      </div>
                    </label>

            <!-- Project 2 (active) -->
            <div class="p-3 rounded-xl ring-1 ring-blue-700 bg-blue-900/20">
              <label class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                          <span class="relative w-4 h-4 rounded-md ring-1 ring-blue-600 bg-blue-500/20">
                            <span class="absolute inset-0.5 rounded-[3px] bg-blue-400"></span>
                          </span>
                          <p class="text-sm text-neutral-200 font-geist">
                            Dashboard UI Kit
                          </p>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                          <path d="m6 9 6 6 6-6" class=""></path>
                        </svg>
                      </label>
              <ul class="mt-3 space-y-2 text-sm text-neutral-400 pl-7 list-disc">
                <li class="font-geist">React components with hooks</li>
                <li class="font-geist">Responsive Tailwind styles</li>
              </ul>
            </div>

            <!-- Project 3 -->
            <label class="flex items-start gap-3 p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900 hover:bg-neutral-800 transition cursor-pointer">
                      <span class="relative w-4 h-4 rounded-md ring-1 ring-neutral-700 bg-neutral-900"></span>
                      <div class="flex-1">
                        <p class="text-sm text-neutral-200 font-geist">
                          Mobile app screens
                        </p>
                      </div>
                    </label>
          </div>
        </div>

        <div class="mt-6">
          <p class="text-sm text-neutral-300 font-medium tracking-tight font-geist">
            Export Formats
          </p>
          <div class="mt-3 space-y-3">
            <!-- React -->
            <div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5">
                  <polyline points="16 18 22 12 16 6" class=""></polyline>
                  <polyline points="8 6 2 12 8 18" class=""></polyline>
                </svg>
                <div class="">
                  <p class="text-sm text-neutral-200 font-geist">
                    React + TypeScript
                  </p>
                  <p class="text-xs text-neutral-500 font-geist">
                    Modern component library
                  </p>
                </div>
              </div>
              <div class="relative w-10 h-6 rounded-full bg-blue-900/30 ring-1 ring-blue-600">
                <span class="absolute right-1 top-1 w-4 h-4 rounded-full bg-blue-400"></span>
              </div>
            </div>
            <!-- Vue -->
            <div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5">
                  <circle cx="12" cy="12" r="3" class=""></circle>
                  <path
                    d="m12 1 2.35 2.35L17 1h5v5l-2.35 2.35L22 11v2l-2.35 2.35L22 18v5h-5l-2.35-2.35L12 23l-2.35-2.35L7 23H2v-5l2.35-2.35L2 13v-2l2.35-2.35L2 6V1h5l2.35 2.35z"
                    class="">
                  </path>
                </svg>
                <div class="">
                  <p class="text-sm text-neutral-200 font-geist">
                    Vue 3 Composition API
                  </p>
                  <p class="text-xs text-neutral-500 font-geist">
                    Script setup syntax
                  </p>
                </div>
              </div>
              <div class="relative w-10 h-6 rounded-full bg-blue-900/30 ring-1 ring-blue-600">
                <span class="absolute right-1 top-1 w-4 h-4 rounded-full bg-blue-400"></span>
              </div>
            </div>
            <!-- HTML -->
            <div class="flex items-center justify-between p-3 rounded-xl ring-1 ring-neutral-800 bg-neutral-900">
              <div class="flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-neutral-300" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="1.5">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" class=""></path>
                  <polyline points="14,2 14,8 20,8" class=""></polyline>
                  <line x1="16" y1="13" x2="8" y2="13" class=""></line>
                  <line x1="16" y1="17" x2="8" y2="17" class=""></line>
                  <polyline points="10,9 9,9 8,9" class=""></polyline>
                </svg>
                <div class="">
                  <p class="text-sm text-neutral-200 font-geist">
                    HTML + Tailwind
                  </p>
                  <p class="text-xs text-neutral-500 font-geist">
                    Vanilla JavaScript included
                  </p>
                </div>
              </div>
              <div class="relative w-10 h-6 rounded-full bg-neutral-800 ring-1 ring-neutral-700">
                <span class="absolute left-1 top-1 w-4 h-4 rounded-full bg-neutral-500"></span>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</div>
All Prompts