Back to marketing components
Contact Forms
Explore a curated collection of contact form components built with Tailwind CSS. Display contact forms with modern, responsive layouts perfect for marketing websites and lead generation.
5/5 Dark Mode Updated: Jul 4, 2026
<form
action="#"
class="mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6"
>
<div>
<label class="block text-sm font-medium text-gray-900" for="name">Name</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="email">Email</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="message">Message</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600"
type="submit"
>
Send Message
</button>
</form>Plugins: @tailwindcss/forms
<form
action="#"
class="mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800"
>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="name">
Name
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="email">
Email
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="message">
Message
</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white"
type="submit"
>
Send Message
</button>
</form>Plugins: @tailwindcss/forms
<form
action="#"
class="mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6"
>
<div>
<label class="block text-sm font-medium text-gray-900" for="name">Name</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="email">Email</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="subject">Subject</label>
<select
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="subject"
>
<option value="">Select a subject</option>
<option value="general-inquiry">General Inquiry</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="priority">Priority</label>
<select
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="priority"
>
<option value="">Select a priority</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="message">Message</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600"
type="submit"
>
Send Message
</button>
</form>Plugins: @tailwindcss/forms
<form
action="#"
class="mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800"
>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="name">
Name
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="email">
Email
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="subject">
Subject
</label>
<select
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="subject"
>
<option value="">Select a subject</option>
<option value="general-inquiry">General Inquiry</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="priority">
Priority
</label>
<select
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="priority"
>
<option value="">Select a priority</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="message">
Message
</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white"
type="submit"
>
Send Message
</button>
</form>Plugins: @tailwindcss/forms
<form
action="#"
class="mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6"
>
<div>
<label class="block text-sm font-medium text-gray-900" for="name">Name</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="email">Email</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<fieldset>
<legend class="block text-sm font-medium text-gray-900">Inquiry</legend>
<div class="mt-2 space-y-2">
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
id="general-inquiry"
type="checkbox"
name="inquiry-type"
value="general-inquiry"
/>
<label class="block text-sm text-gray-900" for="general-inquiry">General Inquiry</label>
</div>
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
id="support"
type="checkbox"
name="inquiry-type"
value="support"
/>
<label class="block text-sm text-gray-900" for="support">Support</label>
</div>
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
id="feedback"
type="checkbox"
name="inquiry-type"
value="feedback"
/>
<label class="block text-sm text-gray-900" for="feedback">Feedback</label>
</div>
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
id="other"
type="checkbox"
name="inquiry-type"
value="other"
/>
<label class="block text-sm text-gray-900" for="other">Other</label>
</div>
</div>
</fieldset>
<div>
<label class="block text-sm font-medium text-gray-900" for="message">Message</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600"
type="submit"
>
Send Message
</button>
</form>Plugins: @tailwindcss/forms
<form
action="#"
class="mx-auto max-w-md space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800"
>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="name">
Name
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="email">
Email
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<fieldset>
<legend class="block text-sm font-medium text-gray-900 dark:text-white">Inquiry</legend>
<div class="mt-2 space-y-2">
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="general-inquiry"
type="checkbox"
name="inquiry-type"
value="general-inquiry"
/>
<label class="block text-sm text-gray-900 dark:text-white" for="general-inquiry">
General Inquiry
</label>
</div>
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="support"
type="checkbox"
name="inquiry-type"
value="support"
/>
<label class="block text-sm text-gray-900 dark:text-white" for="support">Support</label>
</div>
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="feedback"
type="checkbox"
name="inquiry-type"
value="feedback"
/>
<label class="block text-sm text-gray-900 dark:text-white" for="feedback"
>Feedback</label
>
</div>
<div class="flex items-center gap-2">
<input
class="size-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="other"
type="checkbox"
name="inquiry-type"
value="other"
/>
<label class="block text-sm text-gray-900 dark:text-white" for="other">Other</label>
</div>
</div>
</fieldset>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="message">
Message
</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white"
type="submit"
>
Send Message
</button>
</form>Plugins: @tailwindcss/forms
<form
action="#"
class="mx-auto grid max-w-lg grid-cols-1 gap-4 rounded-lg border border-gray-300 bg-gray-100 p-6 sm:grid-cols-2"
>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-900" for="name">Name</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="email">Email</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="phone">Phone</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="phone"
type="tel"
placeholder="Your phone"
/>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-900" for="message">Message</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<div class="md:col-span-2">
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600"
type="submit"
>
Send Message
</button>
</div>
</form>Plugins: @tailwindcss/forms
<form
action="#"
class="mx-auto grid max-w-lg grid-cols-1 gap-4 rounded-lg border border-gray-300 bg-gray-100 p-6 sm:grid-cols-2 dark:border-gray-600 dark:bg-gray-800"
>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="name">
Name
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="email">
Email
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="phone">
Phone
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="phone"
type="tel"
placeholder="Your phone"
/>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="message">
Message
</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<div class="md:col-span-2">
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white"
type="submit"
>
Send Message
</button>
</div>
</form>Plugins: @tailwindcss/forms
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="md:py-4">
<h2 class="text-2xl font-bold text-gray-900 sm:text-3xl">Get in touch</h2>
<p class="mt-4 text-pretty text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas delectus alias
magni velit! Dicta corrupti dignissimos dolor consequatur illum tempore consectetur hic
a cupiditate sunt quam, earum nisi aperiam.
</p>
<dl class="mt-6 space-y-3">
<div>
<dt class="sr-only">Phone number</dt>
<dd class="grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
/>
</svg>
<span class="font-medium">+1 (555) 123-4567</span>
</dd>
</div>
<div>
<dt class="sr-only">Email</dt>
<dd class="grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
/>
</svg>
<span class="font-medium">info@example.com</span>
</dd>
</div>
<div>
<dt class="sr-only">Location</dt>
<dd class="grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
<span class="font-medium">123 Main St, Anytown, USA</span>
</dd>
</div>
</dl>
</div>
<form action="#" class="space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6">
<div>
<label class="block text-sm font-medium text-gray-900" for="name">Name</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="email">Email</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900" for="message">Message</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600"
type="submit"
>
Send Message
</button>
</form>
</div>
</div>Plugins: @tailwindcss/forms
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="md:py-4">
<h2 class="text-2xl font-bold text-gray-900 sm:text-3xl dark:text-white">Get in touch</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas delectus alias
magni velit! Dicta corrupti dignissimos dolor consequatur illum tempore consectetur hic
a cupiditate sunt quam, earum nisi aperiam.
</p>
<dl class="mt-6 space-y-3">
<div>
<dt class="sr-only">Phone number</dt>
<dd
class="grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
/>
</svg>
<span class="font-medium">+1 (555) 123-4567</span>
</dd>
</div>
<div>
<dt class="sr-only">Email</dt>
<dd
class="grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
/>
</svg>
<span class="font-medium">info@example.com</span>
</dd>
</div>
<div>
<dt class="sr-only">Location</dt>
<dd
class="grid grid-cols-[24px_1fr] items-center gap-2 text-gray-700 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
<span class="font-medium">123 Main St, Anytown, USA</span>
</dd>
</div>
</dl>
</div>
<form
action="#"
class="space-y-4 rounded-lg border border-gray-300 bg-gray-100 p-6 dark:border-gray-600 dark:bg-gray-800"
>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="name">
Name
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="name"
type="text"
placeholder="Your name"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="email">
Email
</label>
<input
class="mt-1 w-full rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="email"
type="email"
placeholder="Your email"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-900 dark:text-white" for="message">
Message
</label>
<textarea
class="mt-1 w-full resize-none rounded-lg border-gray-300 focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
id="message"
rows="4"
placeholder="Your message"
></textarea>
</div>
<button
class="block w-full rounded-lg border border-indigo-600 bg-indigo-600 px-12 py-3 text-sm font-medium text-white transition-colors hover:bg-transparent hover:text-indigo-600 dark:hover:bg-indigo-700 dark:hover:text-white"
type="submit"
>
Send Message
</button>
</form>
</div>
</div>Plugins: @tailwindcss/forms