Build an anonymous ethics reporting form with Tailwind CSS. Explain anonymity and data handling clearly, offer report category and relationship selectors, a detailed account field, optional safe-contact preference, attachment guidance, and an emergency disclaimer. Add a privacy summary panel and JavaScript that toggles contact fields, validates the account length, shows a character count, and returns a memorable private follow-up code after submission.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build an anonymous ethics reporting form with Tailwind CSS. Explain anonymity and data handling clearly, offer report category and relationship selectors, a detailed account field, optional safe-contact preference, attachment guidance, and an emergency disclaimer. Add a privacy summary panel and JavaScript that toggles contact fields, validates the account length, shows a character count, and returns a memorable private follow-up code after submission.
<div class="min-h-screen bg-[#f3f0e8] p-6"><section class="mx-auto grid max-w-4xl overflow-hidden rounded-3xl bg-white shadow-sm lg:grid-cols-[1.3fr_0.7fr]"><form id="ethicsForm" class="p-6 md:p-8"><p class="text-xs font-semibold uppercase tracking-[0.18em] text-blue-700">Independent reporting channel</p><h1 class="mt-4 text-3xl font-semibold tracking-tight text-neutral-900">Share a concern safely</h1><p class="mt-3 text-sm leading-6 text-neutral-500">You do not need to provide your name. Reports are reviewed by an independent ethics team.</p><div class="mt-7 grid gap-4 sm:grid-cols-2"><label class="text-sm font-medium text-neutral-700">Type of concern<select class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5"><option>Workplace conduct</option><option>Financial integrity</option><option>Safety or security</option><option>Conflict of interest</option></select></label><label class="text-sm font-medium text-neutral-700">Your relationship<select class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5"><option>Employee</option><option>Contractor</option><option>Customer</option><option>Prefer not to say</option></select></label></div><label class="mt-4 block text-sm font-medium text-neutral-700">What happened?<textarea id="ethicsAccount" minlength="80" required rows="7" placeholder="Include dates, locations, and relevant context without identifying yourself" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5 outline-none focus:border-neutral-900"></textarea><span class="mt-1 flex justify-between text-xs"><span id="ethicsError" class="text-neutral-400">At least 80 characters</span><span id="ethicsCount" class="text-neutral-400">0</span></span></label><label class="mt-5 flex items-center gap-3 rounded-xl border border-neutral-200 p-4"><input id="safeContact" type="checkbox" class="h-4 w-4" /><span><b class="block text-sm">I can receive a private reply</b><small class="text-neutral-400">Optional; your report can remain anonymous</small></span></label><label id="safeContactField" class="mt-3 hidden text-sm font-medium text-neutral-700">Safe email address<input type="email" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5" /></label><button class="mt-6 w-full rounded-xl bg-blue-700 px-4 py-3 text-sm font-medium text-white">Submit encrypted report</button></form><aside class="bg-blue-950 p-6 text-white md:p-8"><p class="text-xs uppercase tracking-wider text-blue-200/60">Privacy summary</p><ul class="mt-6 space-y-5 text-sm leading-6 text-white/65"><li><b class="block text-white">No account required</b>Submit without signing in or sharing your identity.</li><li><b class="block text-white">Metadata minimized</b>Network identifiers are not included in the review copy.</li><li><b class="block text-white">Private follow-up</b>You receive a code to check responses securely.</li></ul><p class="mt-8 border-t border-white/10 pt-5 text-xs leading-5 text-white/40">This channel is not monitored for immediate emergencies. Contact local emergency services if anyone is in imminent danger.</p></aside><div id="ethicsReceipt" class="hidden p-8 lg:col-span-2"><p class="text-xs font-semibold uppercase tracking-wider text-green-700">Report received</p><h2 class="mt-3 text-2xl font-semibold">Save your private follow-up code</h2><code class="mt-6 block rounded-xl bg-neutral-950 p-5 text-center text-xl tracking-[0.2em] text-white">MAPLE-47-RIVER</code><p class="mt-4 text-sm text-neutral-500">This code is the only way to revisit the report anonymously. It cannot be recovered.</p></div></section></div>
var account = document.getElementById("ethicsAccount"); var contact = document.getElementById("safeContact"); account.addEventListener("input", function () { var length = account.value.trim().length; document.getElementById("ethicsCount").textContent = length + " characters"; document.getElementById("ethicsError").textContent = length >= 80 ? "Ready to submit" : 80 - length + " more required"; document.getElementById("ethicsError").className = length >= 80 ? "text-green-700" : "text-neutral-400"; }); contact.addEventListener("change", function () { document.getElementById("safeContactField").classList.toggle("hidden", !contact.checked); }); document.getElementById("ethicsForm").addEventListener("submit", function (event) { event.preventDefault(); if (account.value.trim().length < 80) { account.focus(); return; } this.classList.add("hidden"); this.nextElementSibling.classList.add("hidden"); document.getElementById("ethicsReceipt").classList.remove("hidden"); });
