Marketing
Marketing Contact Forms Grid Dark
Live Preview
<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>