Copy Build a procurement review request form with Tailwind CSS. Ask for organization, expected seats, target purchase date, deployment region, and the buyer’s required materials. Provide selectable document cards for a security overview, DPA, accessibility report, insurance certificate, and vendor questionnaire. Show a live package summary with review owner and response target. Add JavaScript that updates the summary, requires at least one material, and replaces the form with a tracked request receipt on submission.<div class="min-h-screen bg-slate-100 p-6"><section class="mx-auto grid max-w-5xl overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm lg:grid-cols-[1.25fr_0.75fr]"><form id="procurementForm" class="p-6 md:p-8"><p class="text-xs font-semibold uppercase tracking-wider text-blue-700">Enterprise procurement</p><h1 class="mt-3 text-2xl font-semibold text-slate-900">Prepare your review package</h1><p class="mt-2 text-sm text-slate-500">Tell us what your buying team needs. A specialist will verify and deliver the current documents.</p><div class="mt-7 grid gap-4 sm:grid-cols-2"><label class="text-sm font-medium text-slate-700">Organization<input required value="Northstar Labs" class="mt-1.5 w-full rounded-xl border border-slate-200 px-3 py-2.5" /></label><label class="text-sm font-medium text-slate-700">Expected seats<input id="procurementSeats" type="number" min="1" value="120" class="mt-1.5 w-full rounded-xl border border-slate-200 px-3 py-2.5" /></label><label class="text-sm font-medium text-slate-700">Target purchase date<input type="date" required value="2026-10-15" class="mt-1.5 w-full rounded-xl border border-slate-200 px-3 py-2.5" /></label><label class="text-sm font-medium text-slate-700">Deployment region<select id="procurementRegion" class="mt-1.5 w-full rounded-xl border border-slate-200 px-3 py-2.5"><option>European Union</option><option>United States</option><option>Asia Pacific</option></select></label></div><fieldset class="mt-6"><legend class="text-sm font-medium text-slate-700">Materials required</legend><div id="procurementMaterials" class="mt-3 grid gap-2 sm:grid-cols-2"><label class="flex items-center gap-3 rounded-xl border border-slate-200 p-3 text-sm"><input type="checkbox" value="Security overview" checked /> Security overview</label><label class="flex items-center gap-3 rounded-xl border border-slate-200 p-3 text-sm"><input type="checkbox" value="Data processing agreement" checked /> Data processing agreement</label><label class="flex items-center gap-3 rounded-xl border border-slate-200 p-3 text-sm"><input type="checkbox" value="Accessibility report" /> Accessibility report</label><label class="flex items-center gap-3 rounded-xl border border-slate-200 p-3 text-sm"><input type="checkbox" value="Insurance certificate" /> Insurance certificate</label><label class="flex items-center gap-3 rounded-xl border border-slate-200 p-3 text-sm sm:col-span-2"><input type="checkbox" value="Vendor questionnaire" /> We have a vendor questionnaire to complete</label></div><p id="procurementError" class="mt-2 hidden text-xs text-red-600">Select at least one required material.</p></fieldset><button class="mt-7 w-full rounded-xl bg-blue-700 px-4 py-3 text-sm font-medium text-white">Request procurement package</button></form><aside class="bg-slate-950 p-6 text-white md:p-8"><p class="text-xs uppercase tracking-wider text-white/40">Package summary</p><div class="mt-6 rounded-2xl bg-white/5 p-4"><p id="procurementCount" class="text-3xl font-semibold"></p><p class="mt-1 text-xs text-white/40">selected materials</p><ul id="procurementList" class="mt-4 space-y-2 text-xs text-white/65"></ul></div><div class="mt-7 space-y-4 text-sm"><div><p class="text-xs text-white/35">Review owner</p><p class="mt-1">Enterprise trust desk</p></div><div><p class="text-xs text-white/35">Response target</p><p id="procurementSla" class="mt-1"></p></div></div></aside><div id="procurementReceipt" class="hidden p-8 lg:col-span-2"><p class="text-xs font-semibold uppercase tracking-wider text-green-700">Request received</p><h2 class="mt-3 text-2xl font-semibold text-slate-900">Procurement case PR-84219</h2><p class="mt-2 text-sm text-slate-500">The trust desk will send a verified package and tracking link within the stated response target.</p></div></section></div>var materials = [].slice.call(document.querySelectorAll("#procurementMaterials input")); var seats = document.getElementById("procurementSeats"); function selectedMaterials() { return materials.filter(function (input) { return input.checked; }).map(function (input) { return input.value; }); } function renderProcurement() { var selected = selectedMaterials(); document.getElementById("procurementCount").textContent = selected.length; document.getElementById("procurementList").innerHTML = selected.map(function (name) { return "<li>✓ " + name + "</li>"; }).join("") || '<li class="text-amber-300">No materials selected</li>'; document.getElementById("procurementSla").textContent = Number(seats.value) >= 100 ? "1 business day" : "2 business days"; document.getElementById("procurementError").classList.toggle("hidden", selected.length > 0); } materials.forEach(function (input) { input.addEventListener("change", renderProcurement); }); seats.addEventListener("input", renderProcurement); document.getElementById("procurementForm").addEventListener("submit", function (event) { event.preventDefault(); if (!selectedMaterials().length) { renderProcurement(); return; } this.classList.add("hidden"); this.nextElementSibling.classList.add("hidden"); document.getElementById("procurementReceipt").classList.remove("hidden"); }); renderProcurement(); 