Split contact form

Build a contact section with Tailwind CSS: two columns. Left has a heading, a paragraph, and a small list of contact methods (email, phone, address) each with an icon square. Right is a form card with name, email, subject, and message textarea plus a submit button. Stack on mobile.

<section class="mx-auto grid max-w-5xl gap-12 px-6 py-16 lg:grid-cols-2">
  <div>
    <h2 class="text-3xl font-semibold text-neutral-900">Get in touch</h2>
    <p class="mt-3 text-neutral-500">We usually respond within one business day.</p>
    <ul class="mt-8 space-y-4 text-sm">
      <li class="flex items-center gap-3"><span class="flex h-9 w-9 items-center justify-center rounded-lg bg-neutral-900 text-white">@</span><span class="text-neutral-700">[email protected]</span></li>
      <li class="flex items-center gap-3"><span class="flex h-9 w-9 items-center justify-center rounded-lg bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M7 3H4a1 1 0 0 0-1 1c0 9.4 7.6 17 17 17a1 1 0 0 0 1-1v-3l-5-2-1.5 2a14 14 0 0 1-7.5-7.5L9 8 7 3Z"/></svg></span><span class="text-neutral-700">+1 (555) 012-3456</span></li>
      <li class="flex items-center gap-3"><span class="flex h-9 w-9 items-center justify-center rounded-lg bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m3 11 9-8 9 8"/><path d="M5 10v10h14V10M9 20v-6h6v6"/></svg></span><span class="text-neutral-700">123 Market St, San Francisco</span></li>
    </ul>
  </div>
  <form class="rounded-2xl border border-neutral-200 bg-white p-6">
    <div class="grid gap-4 sm:grid-cols-2">
      <input placeholder="First name" class="rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <input placeholder="Last name" class="rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
    </div>
    <input type="email" placeholder="Email" class="mt-4 w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
    <textarea rows="4" placeholder="How can we help?" class="mt-4 w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10"></textarea>
    <button class="mt-4 w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white hover:bg-neutral-800">Send message</button>
  </form>
</section>