Contact Sections
Ready to use Tailwind CSS contact section components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Contact sections don't need to be complicated, someone fills in a name, email, message, and hits send. But how it looks still matters. We have a few layouts here: a simple form on its own, a two-column version with your address or phone number on the left, and a couple of minimalist ones that just let the form breathe. They use the @tailwindcss/forms plugin so the inputs look clean without a lot of extra CSS. You'll need to wire up the actual form submission yourself.
Tailwind
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Get in touch</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">Have any questions or need assistance? Feel free to reach out to us. We're here to connect with you and ensure all your queries are addressed.</p>
</div>
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
<path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
</svg>
</div>
<div class="flex flex-auto flex-col items-start">
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Contact sales</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Talk to our helpful team.</p>
</div>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
</div>
</div>
<div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M20 19H18C16.8954 19 16 18.1046 16 17V15C16 13.8954 16.8954 13 18 13H20M20 19V13M20 19V19C20 20.6569 18.6569 22 17 22H11M4 13V17C4 18.1046 4.89543 19 6 19V19C7.10457 19 8 18.1046 8 17V15C8 13.8954 7.10457 13 6 13H4ZM4 13V10C4 5.58172 7.58172 2 12 2V2C16.4183 2 20 5.58172 20 10V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-auto flex-col items-start">
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Contact support</h3>
<p class="mt-2 text-base leading-7 text-gray-600">We're ready to assist you.</p>
</div>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
</div>
</div>
<div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-auto flex-col items-start">
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Visit us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Come see us at our HQ.</p>
</div>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">Get directions</a>
</div>
</div>
<div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex flex-auto flex-col items-start">
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Call us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Weekdays, 8am – 5pm.</p>
</div>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">+1 (555) 123-4567</a>
</div>
</div>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<!-- Test -->
<div class="bg-white py-24 sm:py-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Let’s discuss your project</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">We assist businesses and individuals in developing their brands.</p>
</div>
<form action="#" method="POST" class="mx-auto mt-16 max-w-xl sm:mt-20">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">First name</label>
<input type="text" name="first-name" id="first-name" placeholder="First name" autocomplete="given-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div>
<label for="last-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">Last name</label>
<input type="text" name="last-name" id="last-name" placeholder="Last name" autocomplete="family-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="email" class="block select-none text-sm font-semibold leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<div class="flex justify-between">
<label for="company" class="block select-none text-sm font-semibold leading-6 text-gray-900">Company</label>
<p id="company-description" class="text-sm leading-6 text-gray-400">Optional</p>
</div>
<input type="text" name="company" id="company" placeholder="Company" aria-describedby="company-description" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<div class="flex justify-between">
<label for="phone" class="block select-none text-sm font-semibold leading-6 text-gray-900">Phone</label>
<p id="phone-description" class="text-sm leading-6 text-gray-400">Optional</p>
</div>
<div class="relative mt-2">
<div class="absolute inset-y-0 left-0">
<label for="country" class="sr-only">Country</label>
<select name="country" id="country" class="rounded-md border-0 bg-transparent bg-none py-2 pl-4 pr-8 text-base text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6">
<option value="US">US</option>
<option value="FR">FR</option>
<option value="IT">IT</option>
<option value="DE">DE</option>
</select>
<svg class="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<input type="tel" name="phone" id="phone" placeholder="+1 (555) 123-4567" autocomplete="tel" aria-describedby="phone-description" class="w-full rounded-md border-0 bg-white py-2 pl-20 pr-3.5 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
</div>
<div class="sm:col-span-2">
<label for="message" class="block select-none text-sm font-semibold leading-6 text-gray-900">Message</label>
<textarea name="message" id="message" rows="4" placeholder="Leave us a message" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6"></textarea>
</div>
<fieldset class="sm:col-span-2">
<legend class="block select-none text-sm font-semibold leading-6 text-gray-900">Project scope</legend>
<div class="mt-2 grid grid-cols-1 gap-2 text-sm leading-6 text-gray-600 sm:grid-cols-2">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-website-redesign" value="scope-website-redesign" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-website-redesign" class="select-none">Website redesign</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-brand-strategy" value="scope-brand-strategy" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-brand-strategy" class="select-none">Brand strategy</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-seo-optimization" value="scope-seo-optimization" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-seo-optimization" class="select-none">SEO optimization</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-content-creation" value="scope-content-creation" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-content-creation" class="select-none">Content creation</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-marketing-campaign" value="scope-marketing-campaign" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-marketing-campaign" class="select-none">Marketing campaign</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-other" value="scope-other" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-other" class="select-none">Other</label>
</div>
</div>
</fieldset>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Let's talk</button>
</div>
</form>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="space-y-16 divide-y divide-gray-100">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-12 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div>
<h2 class="text-4xl font-semibold tracking-tight text-gray-900">Get in touch</h2>
<p class="mt-4 text-base leading-7 text-gray-600">Have any questions or need assistance? Feel free to reach out to us.</p>
</div>
<div class="grid grid-cols-1 gap-12 sm:col-span-2 sm:grid-cols-2">
<div class="flex gap-x-6">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
<path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
</svg>
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Contact sales</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Talk to our helpful team.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M20 19H18C16.8954 19 16 18.1046 16 17V15C16 13.8954 16.8954 13 18 13H20M20 19V13M20 19V19C20 20.6569 18.6569 22 17 22H11M4 13V17C4 18.1046 4.89543 19 6 19V19C7.10457 19 8 18.1046 8 17V15C8 13.8954 7.10457 13 6 13H4ZM4 13V10C4 5.58172 7.58172 2 12 2V2C16.4183 2 20 5.58172 20 10V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Contact support</h3>
<p class="mt-2 text-base leading-7 text-gray-600">We're ready to assist you.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Visit us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Come see us at our HQ.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">Get directions</a>
</div>
</div>
<div class="flex gap-x-6">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
<svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Call us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Weekdays, 8am – 5pm.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">+1 (555) 123-4567</a>
</div>
</div>
</div>
</div>
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-12 gap-y-16 pt-16 lg:max-w-none lg:grid-cols-3">
<div>
<h2 class="text-4xl font-semibold tracking-tight text-gray-900">Our offices</h2>
<p class="mt-4 text-base leading-7 text-gray-600">Discover our global offices, designed for collaboration and innovation.</p>
</div>
<div class="grid grid-cols-1 gap-12 sm:col-span-2 sm:grid-cols-2">
<div class="flex gap-x-6">
<div class="h-11 w-11 flex-none overflow-hidden rounded-full bg-gray-100 shadow-sm">
<img class="h-full w-full object-cover" src="https://flagcdn.com/us.svg" width="44" alt="USA flag" />
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">USA</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-600">
<p>4556 Brendan Ferry</p>
<p>Los Angeles, CA 90210</p>
</address>
</div>
</div>
<div class="flex gap-x-6">
<div class="h-11 w-11 flex-none overflow-hidden rounded-full bg-gray-100 shadow-sm">
<img class="h-full w-full object-cover" src="https://flagcdn.com/fr.svg" width="44" alt="France flag" />
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">France</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-600">
<p>9876 Rue de la Paix</p>
<p>Paris, 75002</p>
</address>
</div>
</div>
<div class="flex gap-x-6">
<div class="h-11 w-11 flex-none overflow-hidden rounded-full bg-gray-100 shadow-sm">
<img class="h-full w-full object-cover" src="https://flagcdn.com/gb.svg" width="44" alt="UK flag" />
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">UK</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-600">
<p>7890 High Street</p>
<p>London, W1A 1AA</p>
</address>
</div>
</div>
<div class="flex gap-x-6">
<div class="h-11 w-11 flex-none overflow-hidden rounded-full bg-gray-100 shadow-sm">
<img class="h-full w-full object-cover" src="https://flagcdn.com/au.svg" width="44" alt="Australia flag" />
</div>
<div class="flex-auto">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Australia</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-600">
<p>3210 George Street</p>
<p>Sydney, NSW 2000</p>
</address>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-12 gap-y-16 lg:max-w-none lg:grid-cols-3">
<div>
<h2 class="text-4xl font-semibold tracking-tight text-white">Our offices</h2>
<p class="mt-4 text-base leading-7 text-gray-300">Discover our global offices, designed for collaboration and innovation.</p>
</div>
<div class="grid grid-cols-1 gap-12 sm:col-span-2 sm:grid-cols-2">
<div>
<h3 class="text-xl font-medium tracking-tight text-white">USA</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-300">
<p>4556 Brendan Ferry</p>
<p>Los Angeles, CA 90210</p>
</address>
</div>
<div>
<h3 class="text-xl font-medium tracking-tight text-white">France</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-300">
<p>9876 Rue de la Paix</p>
<p>Paris, 75002</p>
</address>
</div>
<div>
<h3 class="text-xl font-medium tracking-tight text-white">UK</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-300">
<p>7890 High Street</p>
<p>London, W1A 1AA</p>
</address>
</div>
<div>
<h3 class="text-xl font-medium tracking-tight text-white">Australia</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-300">
<p>3210 George Street</p>
<p>Sydney, NSW 2000</p>
</address>
</div>
</div>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="bg-white py-24 sm:py-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-xl lg:max-w-2xl lg:text-center">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Let’s discuss your project</h2>
<p class="mt-2 text-lg leading-8 text-gray-600">We assist businesses and individuals in developing their brands.</p>
</div>
<div class="mx-auto mt-16 grid max-w-xl grid-cols-1 gap-16 sm:gap-y-20 lg:max-w-4xl lg:grid-cols-12 lg:gap-x-20">
<form action="#" method="POST" class="lg:col-span-7">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">First name</label>
<input type="text" name="first-name" id="first-name" placeholder="First name" autocomplete="given-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div>
<label for="last-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">Last name</label>
<input type="text" name="last-name" id="last-name" placeholder="Last name" autocomplete="family-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="email" class="block select-none text-sm font-semibold leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="phone" class="block select-none text-sm font-semibold leading-6 text-gray-900">Phone</label>
<input type="tel" name="phone" id="phone" placeholder="+1 (555) 123-4567" autocomplete="tel" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="message" class="block select-none text-sm font-semibold leading-6 text-gray-900">Message</label>
<textarea name="message" id="message" rows="4" placeholder="Leave us a message" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6"></textarea>
</div>
<div class="flex items-center gap-x-2.5 sm:col-span-2">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="privacy" id="privacy" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="privacy" class="select-none text-sm leading-6 text-gray-600">
I agree to the
<a href="#" class="font-semibold text-pink-500">privacy policy</a>.
</label>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Let's talk</button>
</div>
</form>
<div class="space-y-12 lg:col-span-5">
<div class="">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Contact us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Talk to our helpful team.</p>
<div class="mt-4 flex flex-col items-start space-y-2">
<a href="#" class="inline-flex gap-2 text-base font-semibold text-pink-500">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
<path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
</svg>
[email protected]
</a>
<a href="#" class="inline-flex gap-2 text-base font-semibold text-pink-500">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M20 19H18C16.8954 19 16 18.1046 16 17V15C16 13.8954 16.8954 13 18 13H20M20 19V13M20 19V19C20 20.6569 18.6569 22 17 22H11M4 13V17C4 18.1046 4.89543 19 6 19V19C7.10457 19 8 18.1046 8 17V15C8 13.8954 7.10457 13 6 13H4ZM4 13V10C4 5.58172 7.58172 2 12 2V2C16.4183 2 20 5.58172 20 10V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
[email protected]
</a>
</div>
</div>
<div class="">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Call us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Weekdays, 8am – 5pm.</p>
<a href="#" class="mt-4 inline-flex gap-2 text-base font-semibold text-pink-500">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
+1 (555) 123-4567
</a>
</div>
<div class="">
<h3 class="text-xl font-medium tracking-tight text-gray-900">Visit us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Come see us at our HQ.</p>
<a href="#" class="mt-4 inline-flex gap-2 text-base font-semibold text-pink-500">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
7890 High Street, London, W1A 1AA
</a>
</div>
</div>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-xl lg:max-w-2xl lg:text-center">
<h2 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">Let’s discuss your project</h2>
<p class="mt-2 text-lg leading-8 text-gray-300">We assist businesses and individuals in developing their brands.</p>
</div>
<div class="mx-auto mt-16 grid max-w-xl grid-cols-1 gap-16 sm:gap-y-20 lg:max-w-4xl lg:grid-cols-12 lg:gap-x-20">
<div class="space-y-12 lg:col-span-5">
<div class="">
<h3 class="text-xl font-medium tracking-tight text-white">Contact us</h3>
<p class="mt-2 text-base leading-7 text-gray-300">Talk to our helpful team.</p>
<div class="mt-4 flex flex-col items-start space-y-2">
<a href="#" class="inline-flex gap-2 text-base font-semibold text-white">
<svg class="mt-0.5 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
<path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
</svg>
[email protected]
</a>
<a href="#" class="inline-flex gap-2 text-base font-semibold text-white">
<svg class="mt-0.5 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M20 19H18C16.8954 19 16 18.1046 16 17V15C16 13.8954 16.8954 13 18 13H20M20 19V13M20 19V19C20 20.6569 18.6569 22 17 22H11M4 13V17C4 18.1046 4.89543 19 6 19V19C7.10457 19 8 18.1046 8 17V15C8 13.8954 7.10457 13 6 13H4ZM4 13V10C4 5.58172 7.58172 2 12 2V2C16.4183 2 20 5.58172 20 10V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
[email protected]
</a>
</div>
</div>
<div class="">
<h3 class="text-xl font-medium tracking-tight text-white">Call us</h3>
<p class="mt-2 text-base leading-7 text-gray-300">Weekdays, 8am – 5pm.</p>
<a href="#" class="mt-4 inline-flex gap-2 text-base font-semibold text-white">
<svg class="mt-0.5 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
+1 (555) 123-4567
</a>
</div>
<div class="">
<h3 class="text-xl font-medium tracking-tight text-white">Visit us</h3>
<p class="mt-2 text-base leading-7 text-gray-300">Come see us at our HQ.</p>
<a href="#" class="mt-4 inline-flex gap-2 text-base font-semibold text-white">
<svg class="mt-0.5 h-5 w-5 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
7890 High Street, London, W1A 1AA
</a>
</div>
</div>
<form action="#" method="POST" class="lg:col-span-7">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block select-none text-sm font-semibold leading-6 text-white">First name</label>
<input type="text" name="first-name" id="first-name" placeholder="First name" autocomplete="given-name" class="mt-2 w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div>
<label for="last-name" class="block select-none text-sm font-semibold leading-6 text-white">Last name</label>
<input type="text" name="last-name" id="last-name" placeholder="Last name" autocomplete="family-name" class="mt-2 w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="email" class="block select-none text-sm font-semibold leading-6 text-white">Email</label>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="phone" class="block select-none text-sm font-semibold leading-6 text-white">Phone</label>
<input type="tel" name="phone" id="phone" placeholder="+1 (555) 123-4567" autocomplete="tel" class="mt-2 w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="message" class="block select-none text-sm font-semibold leading-6 text-white">Message</label>
<textarea name="message" id="message" rows="4" placeholder="Leave us a message" class="mt-2 w-full rounded-md border-0 bg-white/5 px-3.5 py-2 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6"></textarea>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Let's talk</button>
</div>
<p class="mt-4 text-sm leading-6 text-gray-400">
By submitting, I acknowledge and accept the
<a href="#" class="font-semibold text-white">privacy policy</a>.
</p>
</form>
</div>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="relative bg-white">
<div class="relative h-64 sm:h-80 lg:absolute lg:left-0 lg:top-0 lg:h-full lg:w-1/2">
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1600275669439-14e40452d20b?auto=format&fit=crop&w=1920&q=80" alt="" />
</div>
<div class="mx-auto max-w-7xl">
<div class="lg:flex">
<div class="ml-auto px-6 pb-24 pt-16 sm:pb-32 sm:pt-24 lg:w-1/2 lg:px-8 lg:pt-32">
<div class="mx-auto max-w-xl lg:mx-0 lg:ml-auto lg:max-w-lg">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Get in touch</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">Have any questions or need assistance? We're here to connect with you and ensure all your queries are addressed.</p>
<form action="#" method="POST" class="mx-auto mt-16 max-w-xl">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">First name</label>
<input type="text" name="first-name" id="first-name" placeholder="First name" autocomplete="given-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div>
<label for="last-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">Last name</label>
<input type="text" name="last-name" id="last-name" placeholder="Last name" autocomplete="family-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="email" class="block select-none text-sm font-semibold leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="Email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<div class="flex justify-between">
<label for="company" class="block select-none text-sm font-semibold leading-6 text-gray-900">Company</label>
<p id="company-description" class="text-sm leading-6 text-gray-400">Optional</p>
</div>
<input type="text" name="company" id="company" placeholder="Company" aria-describedby="company-description" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<div class="flex justify-between">
<label for="phone" class="block select-none text-sm font-semibold leading-6 text-gray-900">Phone</label>
<p id="phone-description" class="text-sm leading-6 text-gray-400">Optional</p>
</div>
<input type="tel" name="phone" id="phone" placeholder="+1 (555) 123-4567" autocomplete="tel" aria-describedby="phone-description" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="message" class="block select-none text-sm font-semibold leading-6 text-gray-900">Message</label>
<textarea name="message" id="message" rows="4" placeholder="Leave us a message" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6"></textarea>
</div>
<fieldset class="sm:col-span-2">
<legend class="block select-none text-sm font-semibold leading-6 text-gray-900">Project scope</legend>
<div class="mt-2 grid grid-cols-1 gap-2 text-sm leading-6 text-gray-600 sm:grid-cols-2">
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-website-redesign" value="scope-website-redesign" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-website-redesign" class="select-none">Website redesign</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-brand-strategy" value="scope-brand-strategy" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-brand-strategy" class="select-none">Brand strategy</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-seo-optimization" value="scope-seo-optimization" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-seo-optimization" class="select-none">SEO optimization</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-content-creation" value="scope-content-creation" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-content-creation" class="select-none">Content creation</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-marketing-campaign" value="scope-marketing-campaign" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-marketing-campaign" class="select-none">Marketing campaign</label>
</div>
<div class="flex items-center gap-x-2.5">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="scope" id="scope-other" value="scope-other" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<label for="scope-other" class="select-none">Other</label>
</div>
</div>
</fieldset>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Send message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-3">
<div class="text-center">
<svg class="mx-auto h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<h3 class="mt-4 text-xl font-medium tracking-tight text-gray-900">Los Angeles, USA</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-600">
<p>4556 Brendan Ferry</p>
<p>Los Angeles, CA 90210</p>
</address>
</div>
<div class="text-center">
<svg class="mx-auto h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<h3 class="mt-4 text-xl font-medium tracking-tight text-gray-900">Toronto, Canada</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-600">
<p>1234 Maple Street</p>
<p>Toronto, ON M5A 1A1</p>
</address>
</div>
<div class="text-center">
<svg class="mx-auto h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<h3 class="mt-4 text-xl font-medium tracking-tight text-gray-900">London, UK</h3>
<address class="mt-2 text-base not-italic leading-7 text-gray-600">
<p>7890 High Street</p>
<p>London, W1A 1AA</p>
</address>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-xl lg:mx-0 lg:max-w-2xl">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Get in touch</h2>
<p class="mt-6 text-lg leading-8 text-gray-600">Have any questions or need assistance? Feel free to reach out to us. We're here to connect with you and ensure all your queries are addressed.</p>
</div>
<div class="mx-auto mt-16 grid max-w-xl grid-cols-1 gap-16 lg:max-w-none lg:grid-cols-2">
<div>
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2">
<div>
<svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
<path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
</svg>
<h3 class="mt-4 text-xl font-medium tracking-tight text-gray-900">Contact sales</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Talk to our helpful team.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
</div>
<div>
<svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M20 19H18C16.8954 19 16 18.1046 16 17V15C16 13.8954 16.8954 13 18 13H20M20 19V13M20 19V19C20 20.6569 18.6569 22 17 22H11M4 13V17C4 18.1046 4.89543 19 6 19V19C7.10457 19 8 18.1046 8 17V15C8 13.8954 7.10457 13 6 13H4ZM4 13V10C4 5.58172 7.58172 2 12 2V2C16.4183 2 20 5.58172 20 10V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<h3 class="mt-4 text-xl font-medium tracking-tight text-gray-900">Contact support</h3>
<p class="mt-2 text-base leading-7 text-gray-600">We're ready to assist you.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
</div>
<div>
<svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<h3 class="mt-4 text-xl font-medium tracking-tight text-gray-900">Visit us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Come see us at our HQ.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">Get directions</a>
</div>
<div>
<svg class="h-7 w-7 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<h3 class="mt-4 text-xl font-medium tracking-tight text-gray-900">Call us</h3>
<p class="mt-2 text-base leading-7 text-gray-600">Weekdays, 8am – 5pm.</p>
<a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">+1 (555) 123-4567</a>
</div>
</div>
</div>
<div class="sm:rounded-2xl sm:bg-gray-50 sm:px-8 sm:py-10">
<form action="#" method="POST">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
<div>
<label for="first-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">First name</label>
<input type="text" name="first-name" id="first-name" placeholder="First name" autocomplete="given-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div>
<label for="last-name" class="block select-none text-sm font-semibold leading-6 text-gray-900">Last name</label>
<input type="text" name="last-name" id="last-name" placeholder="Last name" autocomplete="family-name" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div>
<label for="email" class="block select-none text-sm font-semibold leading-6 text-gray-900">Email</label>
<input type="email" name="email" id="email" placeholder="[email protected]" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div>
<label for="website" class="block select-none text-sm font-semibold leading-6 text-gray-900">Website</label>
<input type="text" name="website" id="website" placeholder="example.com" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<div class="sm:col-span-2">
<label for="message" class="block select-none text-sm font-semibold leading-6 text-gray-900">Message</label>
<textarea name="message" id="message" rows="4" placeholder="Leave us a message" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6"></textarea>
</div>
</div>
<div class="mt-10">
<button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Let's talk</button>
</div>
</form>
</div>
</div>
</div>
</div>Frequently asked questions
-
No, it's just HTML. You connect it to whatever you use, Formspree, your own backend, Netlify Forms, anything. The markup is ready, the logic is on you.
-
Most of them use @tailwindcss/forms for the input styling. The code panel will show a notice if it's needed. Without it the inputs will look like plain browser defaults.
-
Not a live map, no. But the two-column layouts have a good spot where you could drop in a Google Maps or Mapbox iframe without much effort.
-
Yes. The two-column ones collapse to a single column on smaller screens.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.