VibeCoderzVibeCoderz
Telegram
All Prompts
Stylized Code Editor Window with Line Numbers preview
codeeditorcode-blocksyntax-highlightingtailwindviewerui-component

Stylized Code Editor Window with Line Numbers

Стилизованное окно редактора кода с нумерацией строк. UI-компонент на Tailwind для отображения кода с подсветкой синтаксиса. Идеально для документации и портфолио.

Prompt

<div class="relative w-full mr-auto mb-4 ml-auto max-w-xl">
      <div class="absolute inset-0 translate-y-2 scale-[0.98] rounded-lg bg-neutral-900/50 ring-1 ring-white/5 blur-[0.3px]"></div>
      <div class="relative ring-1 ring-white/10 overflow-hidden rounded-lg">
        <div class="flex items-center justify-between px-3 py-2 border-b border-white/5 bg-neutral-950/50">
          <div class="flex items-center gap-2">
            <span class="h-2 w-2 rounded-full bg-red-500/60"></span>
            <span class="h-2 w-2 rounded-full bg-amber-500/60"></span>
            <span class="h-2 w-2 rounded-full bg-emerald-500/60"></span>
          </div>
          <div class="flex items-center gap-2 rounded-full border border-white/10 bg-neutral-900/60 px-2 py-1 text-xs text-neutral-300">
            <svg class="w-3 h-3 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" class=""></path>
            </svg>
            <span class="text-neutral-400/80 font-sans">agents…</span>
          </div>
        </div>
        <div class="relative h-32">
          <div class="absolute inset-0 grid grid-cols-[30px_1fr]">
            <div class="select-none border-r border-white/5 bg-neutral-950/30 px-2 py-2 text-[11px] leading-4 text-neutral-400/50">
              <div class="font-sans">1</div><div class="font-sans">2</div><div class="font-sans">3</div><div class="font-sans">4</div><div class="font-sans">5</div><div class="font-sans">6</div><div class="font-sans">7</div><div class="font-sans">8</div>
            </div>
            <pre class="overflow-hidden text-[11px] leading-4 text-neutral-300 mt-0 mr-0 mb-0 ml-0 pt-2 pr-3 pb-2 pl-3"><span class="text-blue-300 font-sans">class</span> <span class="text-white font-sans">OrchestratorAgent</span>:
  <span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">__init__</span>(<span class="text-emerald-300 font-sans">self</span>, tools, memory):
    <span class="text-emerald-300 font-sans">self</span>.tools = tools
    <span class="text-emerald-300 font-sans">self</span>.memory = memory
  
  <span class="text-blue-300 font-sans">def</span> <span class="text-yellow-300 font-sans">plan</span>(<span class="text-emerald-300 font-sans">self</span>, goal):
    steps = []
    <span class="text-blue-300 font-sans">for</span> tool <span class="text-blue-300 font-sans">in</span> <span class="text-emerald-300 font-sans">self</span>.tools:</pre>
          </div>
          <div class="pointer-events-none absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-neutral-500/5 to-transparent"></div>
        </div>
      </div>
    </div>
All Prompts