Contact Components
UI-only, copy-paste contact forms built with TailwindCSS. HTML, Vue and React code match the preview exactly.
1. Simple Contact Card
Clean single-card layout with name, email, subject, message, and a consent checkbox.
<form class="relative rounded-2xl border border-black/10 bg-white p-6 shadow-sm" aria-label="Contact form">
<div class="mb-6">
<h3 class="text-2xl font-bold">Get in touch</h3>
<p class="text-gray-600">We usually reply within a business day.</p>
</div>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full name</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" name="name" placeholder="Jane Doe" autocomplete="name">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" name="email" placeholder="[email protected]" autocomplete="email">
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Subject (optional)</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" name="subject" placeholder="Subject">
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea class="block w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" name="message" placeholder="Tell us a bit about your project…"></textarea>
</div>
<label class="mt-4 flex items-start gap-3">
<input type="checkbox" class="mt-1 rounded border-gray-300 text-violet focus:ring-violet">
<span class="text-sm text-gray-700">I agree to the processing of my data as described in the privacy policy.</span>
</label>
<div class="mt-6 flex items-center gap-3">
<button type="button" class="inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Send message</button>
<span class="text-xs text-gray-500">We’ll never share your email.</span>
</div>
</form><template>
<form class="relative rounded-2xl border border-black/10 bg-white p-6 shadow-sm" aria-label="Contact form">
<div class="mb-6">
<h3 class="text-2xl font-bold">Get in touch</h3>
<p class="text-gray-600">We usually reply within a business day.</p>
</div>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full name</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" name="name" placeholder="Jane Doe" autocomplete="name" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" name="email" placeholder="[email protected]" autocomplete="email" />
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Subject (optional)</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" name="subject" placeholder="Subject" />
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea class="block w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" name="message" placeholder="Tell us a bit about your project…"></textarea>
</div>
<label class="mt-4 flex items-start gap-3">
<input type="checkbox" class="mt-1 rounded border-gray-300 text-violet focus:ring-violet" />
<span class="text-sm text-gray-700">I agree to the processing of my data as described in the privacy policy.</span>
</label>
<div class="mt-6 flex items-center gap-3">
<button type="button" class="inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Send message</button>
<span class="text-xs text-gray-500">We’ll never share your email.</span>
</div>
</form>
</template>
<script setup>
// UI only; no logic
</script>import React from 'react'
export default function ContactCard() {
return (
<form className="relative rounded-2xl border border-black/10 bg-white p-6 shadow-sm" aria-label="Contact form">
<div className="mb-6">
<h3 className="text-2xl font-bold">Get in touch</h3>
<p className="text-gray-600">We usually reply within a business day.</p>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Full name</label>
<input className="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" name="name" placeholder="Jane Doe" autoComplete="name" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input className="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" name="email" placeholder="[email protected]" autoComplete="email" />
</div>
</div>
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">Subject (optional)</label>
<input className="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" name="subject" placeholder="Subject" />
</div>
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea className="block w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" name="message" placeholder="Tell us a bit about your project…" />
</div>
<label className="mt-4 flex items-start gap-3">
<input type="checkbox" className="mt-1 rounded border-gray-300 text-violet focus:ring-violet" />
<span className="text-sm text-gray-700">I agree to the processing of my data as described in the privacy policy.</span>
</label>
<div className="mt-6 flex items-center gap-3">
<button type="button" className="inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Send message</button>
<span className="text-xs text-gray-500">We’ll never share your email.</span>
</div>
</form>
)
}2. Split Form with Extras
Two-column layout with phone, reason select, and a file upload field.
Need quick answers?
- Check our components docs
- Email us: [email protected]
- Live chat weekdays, 9am–6pm
💡 Tip: Attach screenshots or a short video to speed up troubleshooting.
<div class="grid gap-6 md:grid-cols-2">
<form class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 class="text-xl font-bold mb-1">Contact support</h3>
<p class="text-gray-600 mb-6">We’re here Mon–Fri, 9am–6pm.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium mb-1">First name</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Jane" type="text">
</div>
<div>
<label class="block text-sm font-medium mb-1">Last name</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Doe" type="text">
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Email</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]">
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Phone (optional)</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="tel" placeholder="+1 555 000 0000">
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Reason</label>
<select class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>Product support</option>
<option>Billing</option>
<option>Sales</option>
<option>Other</option>
</select>
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Message</label>
<textarea class="w-full min-h-[120px] rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="How can we help?"></textarea>
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Attachment (optional)</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="file" accept=".png,.jpg,.jpeg,.pdf,.zip,.txt">
</div>
<button type="button" class="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Submit ticket</button>
</form>
<div class="rounded-2xl border border-black/10 bg-gradient-to-b from-gray-50 to-white p-6 shadow-sm">
<h3 class="text-xl font-bold mb-4">Need quick answers?</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start gap-3">...</li>
</ul>
</div>
</div><template>
<div class="grid gap-6 md:grid-cols-2">
<form class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 class="text-xl font-bold mb-1">Contact support</h3>
<p class="text-gray-600 mb-6">We’re here Mon–Fri, 9am–6pm.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium mb-1">First name</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Jane" type="text" />
</div>
<div>
<label class="block text-sm font-medium mb-1">Last name</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Doe" type="text" />
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Email</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]" />
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Phone (optional)</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="tel" placeholder="+1 555 000 0000" />
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Reason</label>
<select class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>Product support</option>
<option>Billing</option>
<option>Sales</option>
<option>Other</option>
</select>
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Message</label>
<textarea class="w-full min-h-[120px] rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="How can we help?"></textarea>
</div>
<div class="mt-4">
<label class="block text-sm font-medium mb-1">Attachment (optional)</label>
<input class="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="file" accept=".png,.jpg,.jpeg,.pdf,.zip,.txt" />
</div>
<button type="button" class="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Submit ticket</button>
</form>
<div class="rounded-2xl border border-black/10 bg-gradient-to-b from-gray-50 to-white p-6 shadow-sm">
<h3 class="text-xl font-bold mb-4">Need quick answers?</h3>
<ul class="space-y-3 text-gray-700">
<li class="flex items-start gap-3">...</li>
</ul>
<div class="mt-6 rounded-lg border border-black/10 bg-white p-4">
<p class="text-sm text-gray-600">💡 Tip: Attach screenshots or a short video to speed up troubleshooting.</p>
</div>
</div>
</div>
</template>
<script setup>
// UI only; no logic
</script>import React from 'react'
export default function ContactSplit() {
return (
<div className="grid gap-6 md:grid-cols-2">
<form className="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 className="text-xl font-bold mb-1">Contact support</h3>
<p className="text-gray-600 mb-6">We’re here Mon–Fri, 9am–6pm.</p>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="block text-sm font-medium mb-1">First name</label>
<input className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Jane" type="text" />
</div>
<div>
<label className="block text-sm font-medium mb-1">Last name</label>
<input className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Doe" type="text" />
</div>
</div>
<div className="mt-4">
<label className="block text-sm font-medium mb-1">Email</label>
<input className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]" />
</div>
<div className="mt-4">
<label className="block text-sm font-medium mb-1">Phone (optional)</label>
<input className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="tel" placeholder="+1 555 000 0000" />
</div>
<div className="mt-4">
<label className="block text-sm font-medium mb-1">Reason</label>
<select className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>Product support</option>
<option>Billing</option>
<option>Sales</option>
<option>Other</option>
</select>
</div>
<div className="mt-4">
<label className="block text-sm font-medium mb-1">Message</label>
<textarea className="w-full min-h-[120px] rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="How can we help?" />
</div>
<div className="mt-4">
<label className="block text-sm font-medium mb-1">Attachment (optional)</label>
<input className="block w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="file" accept=".png,.jpg,.jpeg,.pdf,.zip,.txt" />
</div>
<button type="button" className="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Submit ticket</button>
</form>
<div className="rounded-2xl border border-black/10 bg-gradient-to-b from-gray-50 to-white p-6 shadow-sm">
<h3 className="text-xl font-bold mb-4">Need quick answers?</h3>
<ul className="space-y-3 text-gray-700">
<li className="flex items-start gap-3">...</li>
</ul>
<div className="mt-6 rounded-lg border border-black/10 bg-white p-4">
<p className="text-sm text-gray-600">💡 Tip: Attach screenshots or a short video to speed up troubleshooting.</p>
</div>
</div>
</div>
)
}3. Contact + Side Map
Two-column layout with a contact form and a map/sidebar with office info.
<div class="grid gap-6 lg:grid-cols-2">
<form class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 class="text-2xl font-bold mb-1">Send us a message</h3>
<p class="text-gray-600 mb-6">We’ll get back within one business day.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full name</label>
<input class="w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" placeholder="Jane Doe">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input class="w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]">
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Reason</label>
<select class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>General inquiry</option>
<option>Support</option>
<option>Partnership</option>
<option>Press</option>
</select>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea class="w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="How can we help?"></textarea>
</div>
<button type="button" class="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Send message</button>
</form>
<div class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<div class="aspect-video w-full overflow-hidden rounded-xl">
<iframe
class="h-full w-full border-0"
loading="lazy"
src="https://maps.google.com/maps?q=Times%20Square%20NYC&t=&z=13&ie=UTF8&iwloc=&output=embed"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="mt-4 space-y-1 text-gray-700">
<p class="font-medium">Our office</p>
<p>123 Main St<br>New York, NY 10001</p>
<p><span class="font-medium">Phone:</span> +1 (555) 123-4567</p>
<p><span class="font-medium">Email:</span> [email protected]</p>
</div>
<a href="https://maps.google.com/?q=Times+Square+NYC" target="_blank" rel="noreferrer" class="mt-4 inline-flex items-center justify-center rounded-md bg-violet px-4 py-2 font-semibold text-white shadow-sm ring-1 ring-black/10">Open in Maps</a>
</div>
</div><template>
<div class="grid gap-6 lg:grid-cols-2">
<form class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 class="text-2xl font-bold mb-1">Send us a message</h3>
<p class="text-gray-600 mb-6">We’ll get back within one business day.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full name</label>
<input class="w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" placeholder="Jane Doe" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input class="w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]" />
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Reason</label>
<select class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>General inquiry</option>
<option>Support</option>
<option>Partnership</option>
<option>Press</option>
</select>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea class="w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="How can we help?"></textarea>
</div>
<button type="button" class="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Send message</button>
</form>
<div class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<div class="aspect-video w-full overflow-hidden rounded-xl">
<iframe
class="h-full w-full border-0"
loading="lazy"
src="https://maps.google.com/maps?q=Times%20Square%20NYC&t=&z=13&ie=UTF8&iwloc=&output=embed"
allowfullscreen
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="mt-4 space-y-1 text-gray-700">
<p class="font-medium">Our office</p>
<p>123 Main St<br>New York, NY 10001</p>
<p><span class="font-medium">Phone:</span> +1 (555) 123-4567</p>
<p><span class="font-medium">Email:</span> [email protected]</p>
</div>
<a href="https://maps.google.com/?q=Times+Square+NYC" target="_blank" rel="noreferrer" class="mt-4 inline-flex items-center justify-center rounded-md bg-violet px-4 py-2 font-semibold text-white shadow-sm ring-1 ring-black/10">Open in Maps</a>
</div>
</div>
</template>
<script setup>
// UI only; no logic
</script>import React from 'react'
export default function ContactWithMap() {
return (
<div className="grid gap-6 lg:grid-cols-2">
<form className="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 className="text-2xl font-bold mb-1">Send us a message</h3>
<p className="text-gray-600 mb-6">We’ll get back within one business day.</p>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Full name</label>
<input className="w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="text" placeholder="Jane Doe" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input className="w-full rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]" />
</div>
</div>
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">Reason</label>
<select className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>General inquiry</option>
<option>Support</option>
<option>Partnership</option>
<option>Press</option>
</select>
</div>
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea className="w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="How can we help?" />
</div>
<button type="button" className="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Send message</button>
</form>
<div className="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<div className="aspect-video w-full overflow-hidden rounded-xl">
<iframe
className="h-full w-full border-0"
loading="lazy"
src="https://maps.google.com/maps?q=Times%20Square%20NYC&t=&z=13&ie=UTF8&iwloc=&output=embed"
allowFullScreen
referrerPolicy="no-referrer-when-downgrade"></iframe>
</div>
<div className="mt-4 space-y-1 text-gray-700">
<p className="font-medium">Our office</p>
<p>123 Main St<br />New York, NY 10001</p>
<p><span className="font-medium">Phone:</span> +1 (555) 123-4567</p>
<p><span className="font-medium">Email:</span> [email protected]</p>
</div>
<a href="https://maps.google.com/?q=Times+Square+NYC" target="_blank" rel="noreferrer" className="mt-4 inline-flex items-center justify-center rounded-md bg-violet px-4 py-2 font-semibold text-white shadow-sm ring-1 ring-black/10">Open in Maps</a>
</div>
</div>
)
}4. Contact + FAQ
Form with a handy FAQ sidebar using native <details> (no JS needed).
FAQ
Do you offer discounts?
We offer volume pricing for teams over 50 seats.
How fast is onboarding?
Most teams are up and running within 1–2 days.
Where is support available?
Global support, Mon–Fri, 9am–6pm local time.
Prefer email? [email protected]
<div class="grid gap-6 lg:grid-cols-3">
<form class="lg:col-span-2 rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 class="text-2xl font-bold mb-1">Contact sales</h3>
<p class="text-gray-600 mb-6">Tell us about your team and we’ll follow up shortly.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Company</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Acme Inc." type="text">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Team size</label>
<select class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>1–10</option><option>11–50</option><option>51–200</option><option>200+</option>
</select>
</div>
</div>
<div class="mt-4 grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Work email</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Phone (optional)</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="tel" placeholder="+1 555 000 0000">
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">What are you looking for?</label>
<textarea class="w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Share goals, timeline, budget…"></textarea>
</div>
<button type="button" class="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Request demo</button>
</form>
<div class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h4 class="text-lg font-semibold mb-4">FAQ</h4>
<details class="group rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary class="cursor-pointer list-none font-medium">Do you offer discounts?</summary>
<p class="mt-2 text-sm text-gray-700">We offer volume pricing for teams over 50 seats.</p>
</details>
<details class="group mt-3 rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary class="cursor-pointer list-none font-medium">How fast is onboarding?</summary>
<p class="mt-2 text-sm text-gray-700">Most teams are up and running within 1–2 days.</p>
</details>
<details class="group mt-3 rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary class="cursor-pointer list-none font-medium">Where is support available?</summary>
<p class="mt-2 text-sm text-gray-700">Global support, Mon–Fri, 9am–6pm local time.</p>
</details>
<div class="mt-6">
<p class="text-sm text-gray-700">Prefer email? <span class="font-medium">[email protected]</span></p>
<div class="mt-3 flex gap-2">
<a href="#" class="rounded-md border border-black/10 px-3 py-1.5 text-sm">Twitter</a>
<a href="#" class="rounded-md border border-black/10 px-3 py-1.5 text-sm">GitHub</a>
<a href="#" class="rounded-md border border-black/10 px-3 py-1.5 text-sm">Docs</a>
</div>
</div>
</div>
</div><template>
<div class="grid gap-6 lg:grid-cols-3">
<form class="lg:col-span-2 rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 class="text-2xl font-bold mb-1">Contact sales</h3>
<p class="text-gray-600 mb-6">Tell us about your team and we’ll follow up shortly.</p>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Company</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Acme Inc." type="text" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Team size</label>
<select class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>1–10</option><option>11–50</option><option>51–200</option><option>200+</option>
</select>
</div>
</div>
<div class="mt-4 grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Work email</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Phone (optional)</label>
<input class="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="tel" placeholder="+1 555 000 0000" />
</div>
</div>
<div class="mt-4">
<label class="block text-sm font-medium text-gray-700 mb-1">What are you looking for?</label>
<textarea class="w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Share goals, timeline, budget…"></textarea>
</div>
<button type="button" class="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Request demo</button>
</form>
<div class="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h4 class="text-lg font-semibold mb-4">FAQ</h4>
<details class="group rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary class="cursor-pointer list-none font-medium">Do you offer discounts?</summary>
<p class="mt-2 text-sm text-gray-700">We offer volume pricing for teams over 50 seats.</p>
</details>
<details class="group mt-3 rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary class="cursor-pointer list-none font-medium">How fast is onboarding?</summary>
<p class="mt-2 text-sm text-gray-700">Most teams are up and running within 1–2 days.</p>
</details>
<details class="group mt-3 rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary class="cursor-pointer list-none font-medium">Where is support available?</summary>
<p class="mt-2 text-sm text-gray-700">Global support, Mon–Fri, 9am–6pm local time.</p>
</details>
<div class="mt-6">
<p class="text-sm text-gray-700">Prefer email? <span class="font-medium">[email protected]</span></p>
<div class="mt-3 flex gap-2">
<a href="#" class="rounded-md border border-black/10 px-3 py-1.5 text-sm">Twitter</a>
<a href="#" class="rounded-md border border-black/10 px-3 py-1.5 text-sm">GitHub</a>
<a href="#" class="rounded-md border border-black/10 px-3 py-1.5 text-sm">Docs</a>
</div>
</div>
</div>
</div>
</template>
<script setup>
// UI only; no logic
</script>import React from 'react'
export default function ContactWithFAQ() {
return (
<div className="grid gap-6 lg:grid-cols-3">
<form className="lg:col-span-2 rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h3 className="text-2xl font-bold mb-1">Contact sales</h3>
<p className="text-gray-600 mb-6">Tell us about your team and we’ll follow up shortly.</p>
<div className="grid gap-4 sm:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Company</label>
<input className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Acme Inc." type="text" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Team size</label>
<select className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet">
<option>1–10</option><option>11–50</option><option>51–200</option><option>200+</option>
</select>
</div>
</div>
<div className="mt-4 grid gap-4 sm:grid-cols-2">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Work email</label>
<input className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="email" placeholder="[email protected]" />
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Phone (optional)</label>
<input className="w-full rounded-md border-0 px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" type="tel" placeholder="+1 555 000 0000" />
</div>
</div>
<div className="mt-4">
<label className="block text-sm font-medium text-gray-700 mb-1">What are you looking for?</label>
<textarea className="w-full min-h-[140px] rounded-md border-0 bg-white px-3 py-2 shadow-sm ring-1 ring-black/10 focus:ring-2 focus:ring-violet" placeholder="Share goals, timeline, budget…" />
</div>
<button type="button" className="mt-6 inline-flex items-center justify-center rounded-md bg-violet px-5 py-2.5 font-semibold text-white shadow-sm ring-1 ring-black/10">Request demo</button>
</form>
<div className="rounded-2xl border border-black/10 bg-white p-6 shadow-sm">
<h4 className="text-lg font-semibold mb-4">FAQ</h4>
<details className="group rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary className="cursor-pointer list-none font-medium">Do you offer discounts?</summary>
<p className="mt-2 text-sm text-gray-700">We offer volume pricing for teams over 50 seats.</p>
</details>
<details className="group mt-3 rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary className="cursor-pointer list-none font-medium">How fast is onboarding?</summary>
<p className="mt-2 text-sm text-gray-700">Most teams are up and running within 1–2 days.</p>
</details>
<details className="group mt-3 rounded-lg border border-black/10 p-4 open:bg-gray-50">
<summary className="cursor-pointer list-none font-medium">Where is support available?</summary>
<p className="mt-2 text-sm text-gray-700">Global support, Mon–Fri, 9am–6pm local time.</p>
</details>
<div className="mt-6">
<p className="text-sm text-gray-700">Prefer email? <span className="font-medium">[email protected]</span></p>
<div className="mt-3 flex gap-2">
<a href="#" className="rounded-md border border-black/10 px-3 py-1.5 text-sm">Twitter</a>
<a href="#" className="rounded-md border border-black/10 px-3 py-1.5 text-sm">GitHub</a>
<a href="#" className="rounded-md border border-black/10 px-3 py-1.5 text-sm">Docs</a>
</div>
</div>
</div>
</div>
)
}🚀 Quick Tips
- These previews are UI-only. Wire up your own POST route or JS as needed.
- Keep markup identical across HTML/Vue/React so design parity is guaranteed.
- Tailwind class tokens are the same in all versions; React uses
className.