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="you@example.com" 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="you@example.com" 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="you@example.com" 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: hello@example.com
- 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="you@example.com">
</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="you@example.com" />
</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="you@example.com" />
</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.
Our office
123 Main St
New York, NY 10001
Phone: +1 (555) 123-4567
Email: support@example.com
<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="you@example.com">
</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> support@example.com</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="you@example.com" />
</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> support@example.com</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="you@example.com" />
</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> support@example.com</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).
<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="you@company.com">
</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">sales@example.com</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="you@company.com" />
</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">sales@example.com</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="you@company.com" />
</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">sales@example.com</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.