Invoice Creation Panel with Live Preview

<div
  class="overflow-hidden flex flex-col bg-white h-[850px] max-w-6xl border-neutral-200/60 border rounded-2xl mr-auto ml-auto relative shadow-2xl"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(3)">
  <header
    class="flex z-20 shrink-0 bg-white border-neutral-100 border-b pt-4 pr-6 pb-4 pl-6 items-center justify-between"
    data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(1) &gt; div:nth-of-type(1) &gt; div:nth-of-type(3) &gt; header:nth-of-type(1)">
    <h2 class="text-base font-semibold text-neutral-900 tracking-tight font-sans">Create Invoice</h2>
    <div class="flex items-center gap-4">
      <label class="flex items-center gap-2 cursor-pointer group">
                            <div class="relative flex items-center">
                                <input type="checkbox" class="peer appearance-none checked:border-[#FF7F50] checked:bg-[#FF7F50] transition-all bg-white w-4 h-4 border-neutral-300 border rounded">
                                <iconify-icon icon="solar:check-read-linear" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white opacity-0 peer-checked:opacity-100 pointer-events-none text-xs"></iconify-icon>
                            </div>
                            <span class="text-xs font-medium text-neutral-500 group-hover:text-neutral-700 transition-colors font-sans">Create another invoice</span>
                        </label>
      <div class="h-4 w-px bg-neutral-200 mx-1"></div>
      <button class="inline-flex hover:bg-[#ff6a33] shadow-orange-500/20 transition-all text-xs font-semibold text-white bg-[#FF7F50] rounded-lg pt-2 pr-4 pb-2 pl-4 shadow-sm gap-x-2 gap-y-2 items-center font-sans">Send Invoice</button>
      <button class="p-2 text-neutral-400 hover:text-neutral-900 transition-colors rounded-lg hover:bg-neutral-50">
                            <iconify-icon icon="solar:close-circle-linear" class="text-lg"></iconify-icon>
                        </button>
    </div>
  </header>

  <div class="flex flex-1 overflow-hidden">

    <div class="w-[42%] bg-white border-r border-neutral-100 flex flex-col h-full">
      <div class="flex-1 overflow-y-auto p-6 space-y-8">
        <div class="flex gap-4 gap-x-4 gap-y-4 items-center">
          <div class="relative flex-1 group">
            <label class="-top-2 text-[10px] uppercase font-bold text-neutral-400 tracking-widest bg-white z-10 pr-1 pl-1 absolute left-3 font-sans">Customer</label>
            <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
              <iconify-icon icon="solar:user-linear"
                class="text-neutral-400 text-lg group-focus-within:text-[#FF7F50] transition-colors"></iconify-icon>
            </div>
            <input type="text" value="Jessica Laving" class="focus:outline-none focus:ring-4 focus:ring-[#FF7F50]/10 focus:border-[#FF7F50] transition-all placeholder:text-neutral-400 text-sm font-semibold text-neutral-900 bg-white w-full border-neutral-200 border-2 rounded-xl pt-3 pr-3 pb-3 pl-10" placeholder="Select customer">
          </div>

          <div class="relative w-44">
            <label class="-top-2 text-[10px] uppercase z-10 font-bold text-neutral-400 tracking-widest bg-white pr-1 pl-1 absolute left-3 font-sans">Template</label>
            <select class="w-full pl-3 pr-10 py-3 bg-neutral-50 border-2 border-neutral-100 rounded-xl text-sm font-semibold text-neutral-700 focus:outline-none focus:border-[#FF7F50] focus:bg-white appearance-none transition-all cursor-pointer">
                                        <option class="font-sans">Design Service</option>
                                        <option class="font-sans">Consulting</option>
                                        <option class="font-sans">Development</option>
                                    </select>
            <iconify-icon icon="solar:alt-arrow-down-linear"
              class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none"></iconify-icon>
          </div>
        </div>

        <div class="flex flex-col w-full gap-4">
          <div class="flex gap-1 bg-neutral-100 w-full border-neutral-200/50 border rounded-xl p-1">
            <button class="flex-1 text-xs font-semibold text-neutral-500 py-2.5 hover:text-neutral-900 transition-colors font-sans">
                                        Single Invoice
                                    </button>
            <button class="flex-1 bg-white shadow-sm border border-neutral-200/60 rounded-lg py-2.5 text-xs font-semibold text-neutral-900 transition-all font-sans">
                                        Recurring
                                    </button>
          </div>

          <div class="mt-2 pt-6 border-t border-neutral-100 flex items-center justify-between">
            <div class="flex flex-col">
              <span class="text-xs font-semibold text-neutral-900 font-sans">Automatic Delivery</span>
              <span class="text-[11px] text-neutral-400 font-medium font-sans">Send email to customer automatically when generated</span>
            </div>

            <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" value="" class="sr-only peer" checked="">
                                        <div class="w-9 h-5 bg-neutral-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-[#FF7F50]"></div>
                                    </label>
          </div>
        </div>

        <section class="border-0 rounded-none pt-0 pr-0 pb-0 pl-0">
          <div class="flex mb-6 items-center justify-between">
            <h3 class="text-xs font-bold text-neutral-900 uppercase tracking-widest font-sans">Billing Schedule</h3>
            <button class="text-[11px] font-bold text-[#FF7F50] hover:underline decoration-2 underline-offset-4 transition-all font-sans">Set Net-30</button>
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div class="relative group">
              <label class="absolute -top-2 left-3 bg-white px-1 text-[10px] font-bold text-neutral-400 uppercase tracking-widest z-10 group-focus-within:text-[#FF7F50] transition-colors font-sans">
                                            Issued
                                        </label>
              <div class="relative">
                <input type="text" value="Jan 10, 2026" class="focus:outline-none focus:ring-4 focus:ring-[#FF7F50]/10 focus:border-[#FF7F50] transition-all text-sm font-semibold text-neutral-900 bg-white w-full border-neutral-200 border-2 rounded-xl py-3 px-4">
                <iconify-icon icon="solar:calendar-linear"
                  class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none group-focus-within:text-[#FF7F50] transition-colors"></iconify-icon>
              </div>
            </div>

            <div class="relative group">
              <label class="absolute -top-2 left-3 bg-white px-1 text-[10px] font-bold text-neutral-400 uppercase tracking-widest z-10 group-focus-within:text-[#FF7F50] transition-colors font-sans">
                                            Due Date
                                        </label>
              <div class="relative">
                <input type="text" value="Feb 10, 2026" class="focus:outline-none focus:ring-4 focus:ring-[#FF7F50]/10 focus:border-[#FF7F50] transition-all text-sm font-semibold text-neutral-900 bg-white w-full border-neutral-200 border-2 rounded-xl py-3 px-4">
                <iconify-icon icon="solar:calendar-mark-linear"
                  class="absolute right-4 top-1/2 -translate-y-1/2 text-neutral-400 pointer-events-none group-focus-within:text-[#FF7F50] transition-colors"></iconify-icon>
              </div>
            </div>
          </div>
        </section>

        <section class="space-y-4">
          <div class="flex items-center justify-between">
            <h3 class="text-xs font-bold text-neutral-900 uppercase tracking-widest font-sans">Line Items</h3>
            <button class="inline-flex items-center gap-1.5 text-xs font-bold text-[#FF7F50] bg-[#FF7F50]/10 px-3 py-1.5 rounded-lg hover:bg-[#FF7F50]/20 transition-all font-sans">
                                        <iconify-icon icon="solar:add-circle-linear" class="text-sm"></iconify-icon>
                                        Add Item
                                    </button>
          </div>

          <div class="border-2 border-neutral-100 rounded-2xl overflow-hidden shadow-sm">
            <div class="flex items-center px-4 py-3 bg-neutral-50/80 border-b-2 border-neutral-100">
              <div class="flex-1 text-[10px] font-black text-neutral-400 uppercase tracking-widest font-sans">
                Description
              </div>
              <div class="w-12 text-center text-[10px] font-black text-neutral-400 uppercase tracking-widest font-sans">
                Qty
              </div>
              <div class="w-24 text-right text-[10px] font-black text-neutral-400 uppercase tracking-widest font-sans">
                Rate
              </div>
            </div>

            <div
              class="group flex items-center px-4 py-4 bg-white border-b border-neutral-100 hover:bg-neutral-50/30 transition-colors">
              <div class="flex-1">
                <p class="text-sm font-bold text-neutral-900 font-sans">Web Design Project</p>
                <p class="text-xs text-neutral-400 font-medium font-sans">Homepage &amp; Dashboard Redesign</p>
              </div>
              <div class="w-12 text-center text-sm font-bold text-neutral-600 font-sans">1</div>
              <div class="w-24 text-right text-sm font-bold text-neutral-900 font-sans">$4,200.00</div>
            </div>

            <div class="group flex items-center px-4 py-4 bg-white hover:bg-neutral-50/30 transition-colors">
              <div class="flex-1">
                <p class="text-sm font-bold text-neutral-900 font-sans">Support (Monthly)</p>
                <p class="text-xs text-neutral-400 font-medium font-sans">Priority fixes + small updates</p>
              </div>
              <div class="w-12 text-center text-sm font-bold text-neutral-600 font-sans">1</div>
              <div class="w-24 text-right text-xs font-black text-emerald-500 uppercase tracking-widest font-sans">Free
              </div>
            </div>
          </div>
        </section>
        <div class="flex gap-2 gap-x-2 gap-y-2">
          <button class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-[#FF7F50]/10 text-[#FF7F50] text-xs font-semibold border border-[#FF7F50]/20 hover:bg-[#FF7F50]/20 transition-colors font-sans">
                                    <iconify-icon icon="solar:sale-linear" class="text-sm"></iconify-icon>
                                    Discount
                                </button>

          <button class="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 rounded-xl bg-neutral-100 text-neutral-700 text-xs font-semibold border border-neutral-200 hover:bg-neutral-200 transition-colors font-sans">
                                    <iconify-icon icon="solar:paperclip-linear" class="text-sm"></iconify-icon>
                                    Attach
                                </button>
        </div>

        <div class="border-neutral-100 border-t pt-4">
          <button class="flex items-center justify-between w-full text-left group">
                                    <span class="text-sm font-medium text-neutral-900 font-sans">Advanced Settings</span>
                                    <iconify-icon icon="solar:alt-arrow-down-linear" class="text-neutral-400 group-hover:text-neutral-600 transition-colors"></iconify-icon>
                                </button>
        </div>
      </div>

      <div class="px-6 py-4 border-t border-neutral-100 bg-white flex justify-between items-center shrink-0">
        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-neutral-200 text-xs font-medium text-neutral-600 hover:bg-neutral-50 transition-colors font-sans">
                                <iconify-icon icon="solar:restart-linear" class="text-sm"></iconify-icon>
                                Reset
                            </button>
        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-neutral-200 text-xs font-medium text-neutral-600 hover:bg-neutral-50 transition-colors font-sans">
                                <iconify-icon icon="solar:eye-closed-linear" class="text-sm"></iconify-icon>
                                Hide Preview
                            </button>
      </div>
    </div>

    <div class="flex-1 overflow-y-auto flex bg-neutral-50/50 pt-8 pr-8 pb-8 pl-8 items-start justify-center">
      <div
        class="min-h-[700px] shadow-neutral-200/40 flex flex-col bg-white w-full max-w-[600px] border-neutral-200/60 border rounded-lg pt-10 pr-10 pb-10 pl-10 shadow-xl justify-between">
        <div class="">
          <!-- Header -->
          <div class="flex justify-between items-start mb-12">
            <div class="flex items-center gap-3">

              <div class="">
                <h1 class="font-bold text-lg text-neutral-900 tracking-tight leading-none font-sans">LEDGER</h1>
                <span class="text-[10px] text-neutral-500 font-medium tracking-widest uppercase font-sans">Finance</span>
              </div>
            </div>
            <div class="text-right">
              <h2 class="text-xl font-bold text-neutral-900 tracking-tight mb-1 font-sans">Invoice #2025-004</h2>
              <p class="text-xs text-neutral-500 font-medium font-sans">Issued: Mar 10, 2025</p>
            </div>
          </div>

          <!-- Addresses -->
          <div class="grid grid-cols-2 gap-12 mb-12 text-xs">
            <div class="">
              <p class="font-semibold text-neutral-900 mb-2 uppercase tracking-wide text-[10px] font-sans">From</p>
              <p class="font-medium text-neutral-800 font-sans">Ledger Inc.</p>
              <p class="text-neutral-500 leading-relaxed mt-1 font-sans">880 Harrison StSan Francisco, CA 94107United
                States
              </p>
            </div>
            <div class="">
              <p class="font-semibold text-neutral-900 mb-2 uppercase tracking-wide text-[10px] font-sans">To</p>
              <p class="font-medium text-neutral-800 font-sans">Acme Corp</p>
              <p class="text-neutral-500 leading-relaxed mt-1 font-sans">123 Business Rd.New York, NY
                10001billing@acmecorp.com</p>
            </div>
          </div>

          <!-- Line Items Table -->
          <div class="mb-8">
            <div class="flex items-center bg-neutral-50 rounded-lg px-4 py-2 mb-2">
              <span class="flex-1 text-[10px] font-bold text-neutral-400 uppercase tracking-widest font-sans">Item Description</span>
              <span class="w-16 text-center text-[10px] font-bold text-neutral-400 uppercase tracking-widest font-sans">Qty</span>
              <span class="w-24 text-right text-[10px] font-bold text-neutral-400 uppercase tracking-widest font-sans">Price</span>
              <span class="w-24 text-right text-[10px] font-bold text-neutral-400 uppercase tracking-widest font-sans">Amount</span>
            </div>

            <div class="flex items-center px-4 py-3 border-b border-neutral-100/50">
              <div class="flex-1">
                <p class="text-sm font-medium text-neutral-900 font-sans">Web Design Project</p>
                <p class="text-[11px] text-neutral-400 mt-0.5 font-sans">Homepage &amp; Dashboard Redesign</p>
              </div>
              <span class="w-16 text-center text-sm text-neutral-600 font-sans">1</span>
              <span class="w-24 text-right text-sm text-neutral-600 font-sans">$4,200.00</span>
              <span class="w-24 text-right text-sm font-semibold text-neutral-900 font-sans">$4,200.00</span>
            </div>
          </div>
        </div>

        <!-- Footer Summary -->
        <div class="border-t-2 border-neutral-900 pt-6">
          <div class="flex justify-end">
            <div class="w-64 space-y-3">
              <div class="flex justify-between text-xs text-neutral-500">
                <span class="font-sans">Subtotal</span>
                <span class="font-sans">$4,200.00</span>
              </div>
              <div class="flex justify-between text-base font-bold text-neutral-900">
                <span class="font-sans">Total Due</span>
                <span class="font-sans">$4,200.00</span>
              </div>
            </div>
          </div>

          <div class="mt-12 text-[10px] text-neutral-400 max-w-sm leading-relaxed">
            <p class="font-medium text-neutral-900 mb-1 font-sans">Payment Instructions</p>
            <p class="font-sans">Please send payment within 21 days of receiving this invoice. Wire transfers are
              preferred
              for amounts over $5,000.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>