Compact centered message form
Create a compact centered contact card with Tailwind CSS: a small heading, a one-line subtitle, an email field, a message textarea, and a submit button, all inside a max-w-md bordered rounded-2xl card on a light background.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create a compact centered contact card with Tailwind CSS: a small heading, a one-line subtitle, an email field, a message textarea, and a submit button, all inside a max-w-md bordered rounded-2xl card on a light background.<section class="flex min-h-[60vh] items-center justify-center bg-neutral-50 p-6">
<div class="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
<h2 class="text-xl font-semibold text-neutral-900">Send us a note</h2>
<p class="mt-1 text-sm text-neutral-500">We'd love to hear from you.</p>
<form class="mt-6 space-y-4">
<input type="email" placeholder="Your email" class="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="Your message" class="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="w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white hover:bg-neutral-800">Submit</button>
</form>
</div>
</section>