Dual Textarea HTML Edit Request Form (Tailwind)

<div class="max-w-7xl md:py-12 mr-auto ml-auto pt-8 pr-6 pb-8 pl-6">
  <!-- Header -->
  <header class="flex items-center justify-between">
    <div class="flex items-center gap-3">
      <div
        class="h-8 w-8 rounded-md bg-neutral-900 ring-1 ring-neutral-800 flex items-center justify-center text-sm tracking-tight font-semibold">
        LX</div>
      <div class="hidden sm:flex items-center gap-2 text-neutral-400 text-sm">
        <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 h-4 w-4">
          <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>Iterative, minimal HTML edits</span>
      </div>
    </div>
    <nav class="hidden md:flex items-center gap-6 text-sm text-neutral-400">
      <a class="hover:text-neutral-200 transition-colors" href="#">Guide</a>
      <a class="hover:text-neutral-200 transition-colors" href="#">Examples</a>
      <a class="hover:text-neutral-200 transition-colors" href="#">FAQ</a>
    </nav>
  </header>

  <!-- Intro -->
  <section class="mt-8 md:mt-12">
    <div class="flex items-start justify-between gap-4">
      <div class="">
        <h1 class="text-2xl sm:text-3xl md:text-4xl tracking-tight font-semibold text-white">Paste your HTML and list
          only the changes you want</h1>
        <p class="mt-3 text-sm sm:text-base text-neutral-400">I’ll modify exactly what you specify and keep the existing
          structure, style, and behavior intact.</p>
      </div>
    </div>
  </section>

  <!-- Main Grid -->
  <section class="mt-8 md:mt-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Left: HTML input -->
    <div class="rounded-xl ring-1 ring-neutral-800 bg-neutral-900/60">
      <div class="flex items-center justify-between px-4 py-3 border-b border-neutral-800">
        <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="file-code-2" class="lucide lucide-file-code-2 h-4 w-4 text-neutral-300">
            <path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v4" class=""></path>
            <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
            <path d="m5 12-3 3 3 3" class=""></path>
            <path d="m9 18 3-3-3-3" class=""></path>
          </svg>
          <h2 class="text-sm font-medium tracking-tight text-neutral-200">Your current HTML</h2>
        </div>
        <div class="flex items-center gap-2 text-xs text-neutral-400">
          <span class="hidden sm:inline">Tip: include the full file or the specific section</span>
        </div>
      </div>
      <div class="p-4">
        <textarea placeholder="Paste your existing HTML here…" class="w-full h-80 md:h-[28rem] resize-y rounded-lg bg-neutral-950/70 ring-1 ring-neutral-800 focus:ring-2 focus:ring-neutral-700 outline-none p-4 font-mono text-[12px] leading-5 text-neutral-200 placeholder:text-neutral-600 transition-all hover:ring-neutral-700" spellcheck="false"></textarea>
        <div class="mt-3 flex items-center justify-between text-xs text-neutral-500">
          <span>No formatting? Paste anyway—I’ll normalize.</span>
          <div class="flex items-center gap-3">
            <button class="px-2.5 py-1.5 rounded-md bg-neutral-900 ring-1 ring-neutral-800 hover:ring-neutral-700 hover:text-neutral-200 transition-colors">Clear</button>
            <button class="px-2.5 py-1.5 rounded-md bg-neutral-100 text-neutral-900 hover:bg-white transition-colors">Attach notes</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Right: Change list -->
    <div class="rounded-xl ring-1 ring-neutral-800 bg-neutral-900/60 flex flex-col">
      <div class="flex items-center justify-between px-4 py-3 border-b border-neutral-800">
        <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="list-checks" class="lucide lucide-list-checks h-4 w-4 text-neutral-300">
            <path d="m3 17 2 2 4-4" class=""></path>
            <path d="m3 7 2 2 4-4" class=""></path>
            <path d="M13 6h8" class=""></path>
            <path d="M13 12h8" class=""></path>
            <path d="M13 18h8" class=""></path>
          </svg>
          <h2 class="text-sm font-medium tracking-tight text-neutral-200">Requested changes</h2>
        </div>
        <div class="flex items-center gap-2 text-xs text-neutral-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"
            data-lucide="circle-help" class="lucide lucide-circle-help h-3.5 w-3.5">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" class=""></path>
            <path d="M12 17h.01" class=""></path>
          </svg>
          <span class="hidden sm:inline">Be explicit: selectors, text, colors, order</span>
        </div>
      </div>
      <div class="p-4 flex-1">
        <textarea placeholder="- Change hero title text to “Acme OS”
- Increase card corner radius to 12px
- Replace CTA icon with “arrow-right”
- Keep all colors the same" class="w-full h-64 md:h-[18rem] resize-y rounded-lg bg-neutral-950/70 ring-1 ring-neutral-800 focus:ring-2 focus:ring-neutral-700 outline-none p-4 font-medium text-sm text-neutral-200 placeholder:text-neutral-600 transition-all hover:ring-neutral-700"></textarea>

        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
          <div class="rounded-lg ring-1 ring-neutral-800 p-3 bg-neutral-950/60">
            <div class="flex items-center gap-2 text-xs text-neutral-300">
              <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="target" class="lucide lucide-target h-3.5 w-3.5">
                <circle cx="12" cy="12" r="10" class=""></circle>
                <circle cx="12" cy="12" r="6" class=""></circle>
                <circle cx="12" cy="12" r="2" class=""></circle>
              </svg>
              Precision
            </div>
            <p class="mt-1 text-xs text-neutral-500">I’ll only modify lines you call out. Everything else stays
              untouched.</p>
          </div>
          <div class="rounded-lg ring-1 ring-neutral-800 p-3 bg-neutral-950/60">
            <div class="flex items-center gap-2 text-xs text-neutral-300">
              <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="git-commit" class="lucide lucide-git-commit h-3.5 w-3.5">
                <circle cx="12" cy="12" r="3" class=""></circle>
                <line x1="3" x2="9" y1="12" y2="12" class=""></line>
                <line x1="15" x2="21" y1="12" y2="12" class=""></line>
              </svg>
              Minimal diffs
            </div>
            <p class="mt-1 text-xs text-neutral-500">Changes are scoped and reversible, ideal for code review.</p>
          </div>
        </div>
      </div>

      <div class="px-4 py-3 border-t border-neutral-800 flex items-center justify-between">
        <div class="text-xs text-neutral-500">Include any constraints (no new libs, keep classes, etc.).</div>
        <div class="flex items-center gap-2">
          <button class="px-3 py-2 rounded-md bg-neutral-900 ring-1 ring-neutral-800 hover:ring-neutral-700 hover:text-neutral-200 transition">Preview diff</button>
          <button class="px-3 py-2 rounded-md bg-neutral-100 text-neutral-900 hover:bg-white transition 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="send" class="lucide lucide-send h-4 w-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
                Send request
              </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Helper tips -->
  <section class="mt-8">
    <div class="rounded-xl ring-1 ring-neutral-800 bg-neutral-900/60 p-4">
      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="flex items-center gap-2 text-sm text-neutral-300">
          <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="info"
            class="lucide lucide-info h-4 w-4">
            <circle cx="12" cy="12" r="10" class=""></circle>
            <path d="M12 16v-4" class=""></path>
            <path d="M12 8h.01" class=""></path>
          </svg>
          What to provide
        </div>
        <div class="text-xs text-neutral-400">
          • Full HTML or target snippet • Exact changes • Any style/tech constraints • Priority order
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer
    class="mt-10 md:mt-14 border-t border-neutral-900 pt-6 text-xs text-neutral-500 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <span>© 2025</span>
      <span>Minimal Edit Assistant</span>
    </div>
    <div class="flex items-center gap-3">
      <a class="hover:text-neutral-300 transition-colors" href="#">Privacy</a>
      <a class="hover:text-neutral-300 transition-colors" href="#">Terms</a>
    </div>
  </footer>
</div>