Tailwind Contact Form UI
Get in touch with us easily through our tailwind contact form Ui. Whether you have questions or feedback, we’re here to help.
All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.
Preview
Contact us
We’re open to talk to good people
Fill in the form
Show Code
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div class="max-w-2xl lg:max-w-5xl mx-auto">
<div class="text-center">
<h1 class="text-3xl font-bold text-gray-800 sm:text-4xl">
Contact us
</h1>
<p class="mt-1 text-gray-600 font-light">
We’re open to talk to good people
</p>
</div>
<div class="mt-12 grid items-center lg:grid-cols-2 gap-6 lg:gap-16">
<div class="flex flex-col border rounded-xl p-4 sm:p-6 lg:p-8">
<h2 class="mb-8 text-xl font-semibold text-gray-800">
Fill in the form
</h2>
<form>
<div class="grid gap-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<input type="text" name="firstname" id="firstname" class="py-3 px-4 block w-full border border-gray-200 font-light outline-none rounded-lg text-sm" placeholder="First Name" />
</div>
<div>
<input type="text" name="lastname" id="lastname" class="py-3 px-4 block w-full border-gray-200 text-sm font-light border rounded-lg outline-none" placeholder="Last Name" />
</div>
</div>
<input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full rounded-lg font-light text-sm border border-gray-200 outline-none" placeholder="Email" />
<textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full border-gray-200 text-sm font-light rounded-lg border outline-none" placeholder="Message"></textarea>
</div>
<div class="mt-4 grid">
<button type="submit" class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-emerald-800 text-white">Send us</button>
</div>
<div class="mt-3 text-center">
<p class="text-sm text-gray-500">
We'll get back to you in 1-2 business days.
</p>
</div>
</form>
</div>
<div class="divide-y divide-gray-200">
<div class="flex gap-x-7 py-6">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82ZM128,192a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.72V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.23,0,24-9,24-20s-10.77-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.85,17.94-36,40-36s40,16.15,40,36C168,125.38,154.24,139.93,136,143.28Z"
></path>
</svg>
<div class="grow">
<h3 class="font-semibold hover:text-emerald-800 text-gray-800">Knowledgebase</h3>
<p class="mt-1 text-sm text-gray-500">We're here to help with your questions.</p>
<a class="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 hover:translate-x-2 duration-200 transition" href="/">
Contact support
<svg class="shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
<div class="flex gap-x-7 py-6">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M169.57,72.59A80,80,0,0,0,16,104v64a16,16,0,0,0,16,16H86.67A80.15,80.15,0,0,0,160,232h64a16,16,0,0,0,16-16V152A80,80,0,0,0,169.57,72.59ZM224,216H160a64.14,64.14,0,0,1-55.68-32.43A79.93,79.93,0,0,0,174.7,89.71,64,64,0,0,1,224,152Z"
></path>
</svg>
<div class="grow">
<h3 class="hover:text-emerald-800 font-semibold text-gray-800">FAQ</h3>
<p class="mt-1 text-sm text-gray-500">FAQ for answers to anything you might ask.</p>
<a class="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 hover:translate-x-2 duration-200 transition" href="https://designcools.com/faq-section-design/">
FAQ
<svg class="shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
<div class="flex gap-x-7 py-6">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M200,40H168a16,16,0,0,0-16-16H32A16,16,0,0,0,16,40v80a16,16,0,0,0,16,16h8v64a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40ZM106.34,61.66a8,8,0,0,1,11.32-11.32l24,24a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L124.69,80Zm-64,24a8,8,0,0,1,0-11.32l24-24A8,8,0,0,1,77.66,61.66L59.31,80,77.66,98.34a8,8,0,0,1-11.32,11.32ZM200,200H56V136h96a16,16,0,0,0,16-16V56h32Z"
></path>
</svg>
<div class="grow">
<h3 class="hover:text-emerald-800 font-semibold text-gray-800">Developer APIs</h3>
<p class="mt-1 text-sm text-gray-500">Check our Public Development API for easily integrate your data.</p>
<a class="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 hover:translate-x-2 duration-200 transition" href="/">
Contact
<svg class="shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
<div class="flex gap-x-7 py-6">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M104,152a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H96A8,8,0,0,1,104,152ZM168,32h24a8,8,0,0,0,0-16H160a8,8,0,0,0-8,8V56h16Zm72,84v60a16,16,0,0,1-16,16H136v32a8,8,0,0,1-16,0V192H32a16,16,0,0,1-16-16V116A60.07,60.07,0,0,1,76,56h76v88a8,8,0,0,0,16,0V56h12A60.07,60.07,0,0,1,240,116Zm-120,0a44,44,0,0,0-88,0v60h88Z"
></path>
</svg>
<div class="grow">
<h3 class="hover:text-emerald-800 font-semibold text-gray-800">Contact us by email</h3>
<p class="mt-1 text-sm text-gray-500">Want to talk with us?</p>
<a class="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800" href="/">
business00196@gmail.com
</a>
</div>
</div>
</div>
</div>
</div>
</div>Preview
Get Information
Contact With Us
Our Location :
925 4th Ave #2300, Seattle, WA 98104, United States of America
24/7 Hotline
+(617) 254-2333Email :
example@example.com
Send Us A Message
Show Code
<section class="px-4 lg:px-0 py-12 max-w-7xl mx-auto">
<div class="flex flex-col items-center justify-between gap-10 lg:flex-row">
<div>
<h2 class="text-xl font-medium">
Get Information
</h2>
<h3 class="mt-5 text-3xl font-bold sm:mt-8 sm:text-4xl">
Contact With Us
</h3>
<div class="mt-7 flex gap-6">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path d="M128,16a88.1,88.1,0,0,0-88,88c0,75.3,80,132.17,83.41,134.55a8,8,0,0,0,9.18,0C136,236.17,216,179.3,216,104A88.1,88.1,0,0,0,128,16Zm0,56a32,32,0,1,1-32,32A32,32,0,0,1,128,72Z"></path>
</svg>
</span>
<div>
<h4 class="text-xl font-bold">
Our Location :
</h4>
<p class="mt-1 max-w-lg font-light">
925 4th Ave #2300, Seattle, WA 98104, United States of America
</p>
</div>
</div>
<div class="mt-7 flex gap-6">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M144.27,45.93a8,8,0,0,1,9.8-5.66,86.22,86.22,0,0,1,61.66,61.66,8,8,0,0,1-5.66,9.8A8.23,8.23,0,0,1,208,112a8,8,0,0,1-7.73-5.93,70.35,70.35,0,0,0-50.33-50.34A8,8,0,0,1,144.27,45.93Zm-2.33,41.8c13.79,3.68,22.65,12.55,26.33,26.34A8,8,0,0,0,176,120a8.23,8.23,0,0,0,2.07-.27,8,8,0,0,0,5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8,8,0,1,0-4.13,15.46Zm72.43,78.73-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L126.87,168c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L89.54,41.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,24,88c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,214.37,166.46Z"
></path>
</svg>
</span>
<div>
<h4 class="text-xl font-bold">
24/7 Hotline
</h4>
<a href="/" class="mt-1 font-light">+(617) 254-2333</a>
</div>
</div>
<div class="mt-7 flex gap-6">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256">
<path
d="M104,152a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H96A8,8,0,0,1,104,152ZM168,32h24a8,8,0,0,0,0-16H160a8,8,0,0,0-8,8V56h16Zm72,84v60a16,16,0,0,1-16,16H136v32a8,8,0,0,1-16,0V192H32a16,16,0,0,1-16-16V116A60.07,60.07,0,0,1,76,56h76v88a8,8,0,0,0,16,0V56h12A60.07,60.07,0,0,1,240,116Zm-120,0a44,44,0,0,0-88,0v60h88Z"
></path>
</svg>
</span>
<div>
<h4 class="text-xl font-bold">
Email :
</h4>
<a href="/" class="mt-1 font-light">example@example.com</a>
</div>
</div>
</div>
<div>
<img loading="lazy" src="https://designcools.com/wp-content/uploads/2024/11/map.jpg" alt="contact form design" />
</div>
</div>
<div class="mt-12 border border-gray-300 rounded-2xl py-8 px-4 shadow-md sm:py-10 sm:px-10">
<h2 class="mb-6 sm:mb-12 text-center text-2xl sm:text-3xl font-extrabold uppercase">
Send Us A Message
</h2>
<div class="grid grid-cols-1 gap-x-6 gap-y-5 md:grid-cols-2">
<input type="text" name="name" placeholder="Full Name" class="rounded-full border border-gray-300 px-4 md:px-7 py-3 md:py-5 text-base outline-none" />
<input type="email" name="email" placeholder="Email Address" class="rounded-full border border-gray-300 px-4 md:px-7 py-3 md:py-5 text-base outline-none" />
<input type="text" name="Mobile" placeholder="Mobile Number" class="rounded-full border border-gray-300 px-4 md:px-7 py-3 md:py-5 text-base outline-none" />
<input type="text" name="City" placeholder="City" class="rounded-full border border-gray-300 px-4 md:px-7 py-3 md:py-5 text-base outline-none" />
<textarea placeholder="Message" class="col-span-1 h-full min-h-[150px] rounded-2xl border border-gray-300 px-4 md:px-7 py-[17px] text-base outline-none md:col-span-2"></textarea>
</div>
<div class="text-center">
<button type="button" class="bg-black text-white px-4 py-3 rounded-lg mt-8">Send message</button>
</div>
</div>
</section>Preview
Contact Us
We’re open to talk to good people.
123 Red light street, London W60 10250
business00196@gmail.com
(+01) 18347589493
Show Code
<div class="container mx-auto pb-4">
<div class="grid lg:grid-cols-3 gap-6 p-2 lg:p-0 items-center">
<div>
<div>
<span class="text-sm uppercase font-medium tracking-wider mb-6">Contact Us</span>
</div>
<h2 class="text-3xl md:text-4xl/tight font-semibold mt-4">We're open to talk to good people.</h2>
<div class="flex flex-col sm:flex-row items-center gap-5 text-center sm:text-start mt-10">
<div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-2xl text-primary">
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
</div>
<h5 class="text-base text-muted font-medium">123 Red light street, London W60 10250</h5>
</div>
<div class="flex flex-col sm:flex-row items-center gap-5 text-center sm:text-start mt-10">
<div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-2xl text-primary">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
</div>
<h5 class="text-base text-muted font-medium">business00196@gmail.com</h5>
</div>
<div class="flex flex-col sm:flex-row items-center gap-5 text-center sm:text-start mt-10">
<div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-2xl text-primary">
<rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect>
<path d="M12 18h.01"></path>
</svg>
</div>
<h5 class="text-base text-muted font-medium">(+01) 18347589493</h5>
</div>
</div>
<div class="lg:col-span-2 lg:ms-24">
<div class="p-4 sm:p-8 rounded-md shadow-lg">
<form>
<div class="grid sm:grid-cols-2 gap-6">
<div>
<label for="firstName" class="block text-sm/normal font-semibold mb-2">First Name</label>
<input type="text" id="firstName" class="block border outline-none broder-gray-500 w-full text-sm rounded-md py-3 px-4" placeholder="Enter First Name" required="" />
</div>
<div>
<label for="lastName" class="block text-sm/normal font-semibold mb-2">Last Name</label>
<input type="text" id="lastName" class="block border outline-none broder-gray-500 w-full text-sm rounded-md py-3 px-4" placeholder="Enter Last Name" required="" />
</div>
<div>
<label for="email" class="block text-sm/normal font-semibold mb-2">Email Address</label>
<input type="email" id="email" class="block border outline-none broder-gray-500 w-full text-sm rounded-md py-3 px-4" placeholder="Enter Email" required="" />
</div>
<div>
<label for="phone" class="block text-sm/normal font-semibold mb-2">Phone Number</label>
<input id="phone" type="text" class="block border outline-none broder-gray-500 w-full text-sm rounded-md py-3 px-4" placeholder="Enter Phone" required="" />
</div>
<div class="sm:col-span-2">
<div class="mb-4">
<label for="message" class="block text-sm/normal font-semibold mb-2">Messages</label>
<textarea id="message" class="block w-full border outline-none broder-gray-500 text-sm rounded-md py-3 px-4" rows="4" placeholder="Enter Message" required=""></textarea>
</div>
</div>
</div>
<div class="mt-4">
<button type="submit" class="py-2 px-6 rounded-md text-[1rem] items-center justify-center text-white bg-black hover:bg-white hover:text-black transition-all duration-500 font-medium">
Send Messages
</button>
</div>
</form>
</div>
</div>
</div>
</div>Preview
Show Code
<div class="max-w-6xl py-24 mx-auto px-4 xl:px-0">
<div class="grid grid-cols-12 gap-y-8 gap-x-0 sm:gap-x-12 lg:gap-x-24">
<div class="col-span-12 sm:col-span-7 lg:col-span-8 xl:col-span-9">
<h2 class="text-3xl sm:text-5xl lg:text-7xl mb-12 lg:mb-24 leading-tight font-medium text-balance">Let's start a project together</h2>
<form>
<div class="flex flex-col md:flex-row py-6 sm:py-8 border-t">
<span class="min-w-auto md:min-w-[5rem] mb-2 md:mb-0 mt-[0.35rem] inline-flex text-sm text-gray-600">01</span>
<div class="w-full">
<label class="flex">What's your name?</label>
<input placeholder="Jon Doe*" class="mt-4 text-lg outline-none w-full" />
</div>
</div>
<div class="flex flex-col md:flex-row py-6 sm:py-8 border-t">
<span class="min-w-auto md:min-w-[5rem] mb-2 md:mb-0 mt-[0.35rem] inline-flex text-sm text-gray-600">02</span>
<div class="w-full">
<label class="flex">What's your email?</label>
<input placeholder="Jon@deo.com*" class="mt-4 text-lg outline-none w-full" />
</div>
</div>
<div class="flex flex-col md:flex-row py-6 sm:py-8 border-t">
<span class="min-w-auto md:min-w-[5rem] mb-2 md:mb-0 mt-[0.35rem] inline-flex text-sm text-gray-600">02</span>
<div class="w-full">
<label class="flex">What's the name of your organization?</label>
<input placeholder="Amazonn" class="mt-4 outline-none text-lg w-full" />
</div>
</div>
<div class="flex flex-col md:flex-row py-6 sm:py-8 border-t">
<span class="min-w-auto md:min-w-[5rem] mb-2 md:mb-0 mt-[0.35rem] inline-flex text-sm text-gray-600">02</span>
<div class="w-full">
<label class="flex">What services are you looking for?</label>
<input placeholder="Web Design, Web Development..." class="mt-4 text-lg outline-none w-full" />
</div>
</div>
<div class="flex flex-col md:flex-row py-6 sm:py-8 border-t">
<span class="min-w-auto md:min-w-[5rem] mb-2 md:mb-0 mt-[0.35rem] inline-flex text-sm text-gray-600">02</span>
<div class="w-full">
<label class="flex">Your message</label>
<input placeholder="Hello Denish, can you help me with...." class="mt-4 text-lg outline-none w-full" />
</div>
</div>
<div class="flex justify-end py-6 sm:py-8 border-t">
<button class="bg-black text-white rounded-md px-8 py-3 text-[1rem]">Send Now</button>
</div>
</form>
</div>
<div class="col-span-12 sm:col-span-5 lg:col-span-4 xl:col-span-3">
<div class="h-24 w-24 mt-0 sm:mt-2 lg:mt-20 mb-10 md:mb-8 lg:mb-14">
<img decoding="async" class="h-full w-full object-cover rounded-full" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="contact form design" />
</div>
<label class="uppercase text-gray-700 tracking-wider text-sm">contact details</label>
<p class="mt-3 text-base">business00196@gmail.com</p>
<p class="mt-1 text-base">+91 934783479</p>
<label class="uppercase text-gray-700 flex mt-10 tracking-wider text-sm">business details</label>
<p class="mt-3 text-base">VAT: NL866034080C09</p>
<p class="mt-1 text-base">LOCATION: UAE</p>
<label class="uppercase text-gray-700 flex mt-10 tracking-wider text-sm">Social</label>
<ul class="text-base mt-3">
<li><a href="/">Twitter</a></li>
<li><a href="/">Facbook</a></li>
<li><a href="/">Dribble</a></li>
<li><a href="/">LinkedIn</a></li>
<li><a href="/">Behance</a></li>
</ul>
</div>
</div>
</div>Preview
Show Code
<footer>
<div class="mx-auto max-w-7xl px-4 xl:px-0 xl:px-0 my-6 xl:my-24">
<div class="grid lg:grid-cols-12 grid-cols-2 gap-10 lg:gap-12">
<div class="lg:col-span-3 sm:col-span-1 col-span-2">
<ul class="flex flex-col gap-3">
<li class="mb-2"><h3 class="xl:text-xl lg:text-lg font-medium text-default-200">About Us</h3></li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Support Center
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Customer Support
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
About Us
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Copyright
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Popular Campaign
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Return Policy
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Privacy Policy
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Terms & Conditions
</a>
</li>
</ul>
</div>
<div class="lg:col-span-3 sm:col-span-1 col-span-2">
<ul class="flex flex-col gap-3">
<li class="mb-2"><h3 class="xl:text-xl lg:text-lg font-medium text-default-200">My Account</h3></li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Press Inquiries
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Social Media Directories
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Images & B-roll
</a>
</li>
<li>
<a href="/" class="text-base text-default-300 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="inline-block h-4 w-4 me-2"
>
<path d="M15.6 2.7a10 10 0 1 0 5.7 5.7"></path>
<circle cx="12" cy="12" r="2"></circle>
<path d="M13.4 10.6 19 5"></path>
</svg>
Site Map
</a>
</li>
</ul>
</div>
<div class="lg:col-span-6 col-span-2">
<div class="bg-white rounded-xl">
<div class="p-6 xl:p-10">
<h4 class="text-xl mb-2">Newsletter</h4>
<p class="text-sm text-gray-600 mb-6">Sign up and receive the latest tips via email.</p>
<form class="space-y-2 mb-6">
<label htmlFor="subcribe" class="text-base">Email</label>
<div class="relative">
<input type="email" id="subcribe" class="py-4 ps-4 pe-4 sm:pe-40 w-full h-12 rounded-md outline-none bg-gray-100 backdrop-blur-3xl" placeholder="Enter email" name="email" />
<button
type="submit"
class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 relative sm:absolute top-0 sm:top-[6px] end:0 sm:end-[6px] mt-4 sm:mt-0 h-12 sm:h-9 transition-all bg-black text-white rounded-md"
>
Subscribe
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="h-4 w-4">
<path d="M18 8L22 12L18 16"></path>
<path d="M2 12H22"></path>
</svg>
</button>
</div>
</form>
<div>
<h6 class="text-base mb-4">Follow US :</h6>
<ul class="flex flex-wrap items-center gap-1">
<li>
<a aria-label="Facebook" href="https://www.facebook.com" class="h-10 w-10 inline-flex items-center justify-center border border-gray-700 rounded-lg transition-all duration-500 group hover:text-white hover:bg-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="h-5 w-5 text-default-300 group"
>
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</a>
</li>
<li>
<a aria-label="instagram" href="https://www.instagram.com" class="h-10 w-10 inline-flex items-center justify-center border border-gray-700 rounded-lg transition-all duration-500 group hover:text-white hover:bg-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="h-5 w-5 text-default-300 group"
>
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</a>
</li>
<li>
<a aria-label="twitter" href="https://www.twitter.com" class="h-10 w-10 inline-flex items-center justify-center border border-gray-700 rounded-lg transition-all duration-500 group hover:text-white hover:bg-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="h-5 w-5 text-default-300 group"
>
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
</svg>
</a>
</li>
<li>
<a aria-label="linkedin" href="https://www.linkedin.com" class="h-10 w-10 inline-flex items-center justify-center border border-gray-700 rounded-lg transition-all duration-500 group hover:text-white hover:bg-black">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
class="h-5 w-5 text-default-300 group"
>
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-300 py-6">
<div class="container mx-auto flex flex-wrap px-4 xl:px-0 justify-center items-center gap-4 h-full md:justify-between text-center md:text-start">
<p class="text-base font-medium text-default-400">
CopyRight © 2024, All Right Reserved
</p>
<p class="text-base font-medium text-default-400">
<a href="/">Terms Conditions & Policy</a>
</p>
</div>
</div>
</footer>Contact form UI design is a crucial element of any website, serving as a direct communication channel between visitors and your business. Its design should prioritize usability and accessibility, ensuring users can easily submit their inquiries, feedback, or requests. An effective contact form UI design not only improves user experience but also helps in building trust and fostering engagement.
When designing a contact form, simplicity is key. Keep the number of fields to a minimum by only requesting essential information such as name, email, and message. Optional fields can be included for more specific inquiries, but avoid overwhelming users with too many inputs. A clear and concise title, such as “Get in Touch” or “Contact Us,” helps set the context for the form.
To improve usability, each field should include descriptive labels and placeholder text. This ensures users understand what information is required, reducing the likelihood of errors. Error messages should be clear and immediate, guiding users to correct mistakes like missing fields or invalid email formats.
Preview
Show Code
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<div class="grid gap-2 grid-cols-4 md:grid-cols-5">
<div class="flex items-center justify-center py-2 col-span-2 md:col-auto">
<svg class="max-w-full fill-current text-gray-400" width="124" height="24" viewBox="0 0 124 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M63.734 11.56c-1.022 0-1.76.325-2.506.657v7.506c.715.066 1.125.066 1.804.066 2.454 0 2.79-1.091 2.79-2.615v-3.585c0-1.125-.384-2.03-2.088-2.03zm-16.295-.41c-1.702 0-2.09.908-2.09 2.032v.632h4.179v-.632c0-1.124-.389-2.032-2.089-2.032zm-31.566 7.813c0 .89.432 1.351 1.386 1.351 1.023 0 1.628-.324 2.375-.656v-1.781h-2.236c-1.06 0-1.525.191-1.525 1.086zm63.711-7.403c-1.705 0-2.296.904-2.296 2.03v4.106c0 1.128.591 2.035 2.296 2.035 1.7 0 2.296-.907 2.296-2.035V13.59c0-1.125-.596-2.03-2.296-2.03zM7.517 23.568H2.505V11.783H0v-4.06h2.505v-2.44C2.505 1.97 3.92 0 7.936 0h3.346v4.062H9.19c-1.565 0-1.668.568-1.668 1.627l-.006 2.033h3.787l-.442 4.06H7.517v11.786zm17.13.03H20.47l-.18-1.026a9.802 9.802 0 01-4.733 1.193c-3.064 0-4.695-1.988-4.695-4.738 0-3.243 1.903-4.401 5.307-4.401h3.465v-.701c0-1.656-.195-2.142-2.817-2.142h-4.286l.419-4.06h4.685c5.751 0 7.013 1.764 7.013 6.235v9.64zm14.207-11.517c-2.6-.433-3.347-.528-4.597-.528-2.247 0-2.926.481-2.926 2.334v3.506c0 1.854.679 2.337 2.926 2.337 1.25 0 1.997-.096 4.597-.531v3.961c-2.277.496-3.76.626-5.015.626-5.381 0-7.52-2.749-7.52-6.72v-2.845c0-3.974 2.139-6.728 7.52-6.728 1.254 0 2.738.13 5.015.629v3.959zm15.686 4.985h-9.192v.327c0 1.854.68 2.337 2.925 2.337 2.02 0 3.252-.096 5.847-.531v3.961c-2.503.496-3.807.626-6.262.626-5.382 0-7.522-2.749-7.522-6.72v-3.253c0-3.474 1.588-6.32 7.103-6.32s7.1 2.813 7.1 6.32v3.253zm16.294.075c0 3.838-1.13 6.638-7.971 6.638-2.47 0-3.92-.21-6.647-.618V1.22l5.01-.812v7.675c1.084-.391 2.485-.59 3.76-.59 5.012 0 5.847 2.183 5.847 5.69v3.958zm16.062.084c0 3.31-1.407 6.522-7.295 6.522-5.891 0-7.325-3.211-7.325-6.522v-3.197c0-3.313 1.434-6.525 7.325-6.525 5.888 0 7.295 3.212 7.295 6.525v3.197zm16.052 0c0 3.31-1.41 6.522-7.296 6.522-5.89 0-7.325-3.211-7.325-6.522v-3.197c0-3.313 1.434-6.525 7.325-6.525 5.887 0 7.296 3.212 7.296 6.525v3.197zm16.473 6.343h-5.432l-4.593-7.449v7.45h-5.013V1.218l5.013-.812v14.388l4.593-7.073h5.432l-5.015 7.718 5.015 8.128zM95.635 11.56c-1.703 0-2.293.904-2.293 2.03v4.106c0 1.128.59 2.035 2.293 2.035 1.7 0 2.301-.907 2.301-2.035V13.59c0-1.125-.601-2.03-2.301-2.03zm26.646 9.228c.844 0 1.517.669 1.517 1.504 0 .848-.673 1.509-1.523 1.509a1.511 1.511 0 01-1.531-1.51c0-.834.685-1.503 1.531-1.503h.006zm-.006.234c-.68 0-1.236.569-1.236 1.27 0 .714.557 1.275 1.242 1.275.687.007 1.235-.561 1.235-1.268 0-.708-.548-1.277-1.235-1.277h-.006zm-.288 2.145h-.275v-1.678c.144-.02.282-.039.488-.039.261 0 .432.054.537.127.101.074.156.187.156.346 0 .222-.15.355-.335.409v.013c.15.027.253.16.288.406.04.261.082.36.109.415h-.289c-.04-.054-.082-.207-.116-.428-.04-.214-.152-.294-.372-.294h-.19v.723h-.001zm0-.929h.2c.225 0 .417-.08.417-.288 0-.147-.109-.293-.418-.293-.09 0-.152.006-.2.013v.568z"
></path>
</svg>
</div>
<div class="flex items-center justify-center py-2 col-span-2 md:col-auto">
<svg class="max-w-full fill-current text-gray-400" width="83" height="30" viewBox="0 0 83 30" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.186 0c.2.093.326.285.486.437.26.225.452.523.705.755.312.298.512.675.771 1.013.452.682.851 1.41 1.057 2.205.213.542.246 1.132.233 1.714.013.53-.133 1.053-.372 1.53-.413.721-1.157 1.205-1.935 1.463-.971.232-2.042.272-2.98-.139-.338-.185-.724-.311-.997-.603-.631-.516-.997-1.357-.877-2.171.186-1.45 1.057-2.695 1.988-3.767.086.158.013.344.073.51.08.35.206.721.472.973.326-.298.672-.596.95-.94.254-.371.46-.782.546-1.219.02-.556.073-1.139-.14-1.668l.02-.093zM.005 6.614c1.556.014 3.118-.013 4.674.014 0 1.542.014 3.085-.006 4.628 1.104.02 2.207.006 3.318.006.013.12.02.239.02.358-.014 1.271.006 2.536-.014 3.807-1.11.013-2.214 0-3.324.006.02 2.285-.007 4.562.013 6.846.04.2.067.398.06.603-.02.185.093.338.133.51.086.397.306.755.558 1.066.373.37.851.629 1.363.741.466.073.931.113 1.404.08.026.08.04.159.04.245a319.227 319.227 0 000 3.568c0 .166-.034.331-.06.49-.672 0-1.344.047-2.015 0-.4-.086-.825-.046-1.21-.218-1.07-.252-2.095-.781-2.86-1.583C.977 26.702.372 25.18.126 23.67c-.067-.166-.027-.358-.054-.536-.093-.365-.053-.749-.066-1.12a5974.61 5974.61 0 010-15.4zm22.714 4.29c.279-.072.578-.02.857-.079.586-.073 1.164.02 1.743.04.405-.007.797.113 1.196.192 1.483.358 2.886 1.145 3.904 2.297.18.298.452.517.624.821.433.682.719 1.444.965 2.212.153.563.232 1.145.306 1.721.033 1.278.013 2.563.02 3.84-.007 2.55.006 5.099-.007 7.648-1.556-.02-3.105-.007-4.655-.014a.365.365 0 01-.06-.046c-.006-3.569 0-7.137 0-10.7.007-.436-.073-.86-.166-1.277a4.106 4.106 0 00-.671-1.172c-.173-.205-.412-.338-.605-.517-.3-.198-.652-.29-.991-.384-.18-.013-.36 0-.525-.06-.712-.046-1.437.014-2.102.286-.485.231-.937.549-1.256.993-.526.622-.698 1.47-.685 2.264 0 3.536.007 7.078 0 10.613-1.57.014-3.139-.006-4.708.014-.026-3.41 0-6.827-.013-10.236.007-.437-.007-.874.027-1.311.086-.219.026-.457.093-.67.12-.807.425-1.575.764-2.31.333-.642.732-1.258 1.25-1.768.406-.41.825-.84 1.337-1.125.99-.689 2.16-1.106 3.358-1.271zm55.72-.039c.579-.013 1.15-.126 1.73-.033.312.04.63.033.943.046.06.576.014 1.159.027 1.735v2.317c0 .146.02.298-.04.437-.153-.112-.359-.073-.532-.119-.705-.06-1.43-.026-2.094.238a3.333 3.333 0 00-1.869 1.596c-.113.14-.113.338-.24.47-.205.742-.219 1.516-.205 2.278-.007 3.257.02 6.508-.014 9.766-1.55-.02-3.105 0-4.66-.014-.014-.013-.034-.04-.047-.053V18.903c-.02-.444.08-.874.073-1.311.106-.212.08-.457.146-.675.332-1.676 1.217-3.258 2.56-4.337.26-.291.632-.43.938-.662.99-.603 2.14-.894 3.284-1.053zm-68.919.39c1.57.027 3.138-.006 4.708.014 0 6.058-.007 12.11 0 18.161 0 .06 0 .179-.093.159H9.533c-.04-1-.006-2.006-.02-3.006.007-5.105 0-10.216.007-15.327zm49.238 12.29c.399-.153.784-.352 1.19-.49.585-.226 1.157-.497 1.742-.722 1.21-.557 2.46-1.02 3.684-1.543.292-.16.625-.232.91-.404.326-.126.652-.238.971-.384.28-.166.599-.232.885-.377.379-.153.744-.325 1.13-.464.392-.218.831-.324 1.223-.536.107-.073.28-.053.346-.179-.113-.159-.053-.358-.113-.53-.086-.31-.173-.615-.246-.92-.299-.92-.731-1.8-1.316-2.569-.712-1.026-1.69-1.854-2.773-2.463-.712-.43-1.51-.675-2.307-.887-.492-.06-.965-.232-1.463-.225-.452-.06-.918-.086-1.363-.007-.792.013-1.55.205-2.3.424-1.31.457-2.554 1.152-3.558 2.112-.3.278-.546.603-.831.887-.446.57-.852 1.172-1.157 1.821-.433.973-.845 1.993-.891 3.072-.147.517-.1 1.06-.107 1.59-.013.337.04.668.107.992-.02.344.113.662.16.993.112.702.425 1.351.71 2 .785 1.602 2.022 2.993 3.571 3.9 1.018.622 2.148 1.066 3.332 1.231.964.152 1.954.179 2.925.053.333.027.652-.12.984-.139 1.417-.331 2.806-.927 3.877-1.927.319-.251.618-.55.87-.867.426-.43.732-.953 1.038-1.47.293-.55.532-1.132.705-1.735-.093-.04-.2-.026-.292-.026-1.556.007-3.106-.007-4.662 0-.146 0-.146.199-.239.278-.266.384-.605.708-.964 1.013-.519.37-1.13.57-1.736.748-.16.02-.312.013-.458.073-.373.027-.752.013-1.13.007-.42-.08-.839-.172-1.244-.305-.625-.318-1.237-.682-1.709-1.198-.12-.146-.312-.258-.352-.45.106-.047.206-.12.325-.14.193-.033.34-.185.526-.238zm-1.915-3.351c-.093-.232-.007-.503-.02-.748.106-.338.14-.695.266-1.033.319-.748.711-1.483 1.283-2.073.266-.218.492-.483.798-.648.226-.12.445-.252.678-.358.432-.126.851-.324 1.303-.324.413-.1.838-.047 1.257-.04 1.097.152 2.201.622 2.912 1.49.074.172-.172.185-.272.251-.432.239-.918.358-1.35.603-.193.033-.36.152-.545.212-1.377.596-2.78 1.119-4.143 1.741-.731.285-1.456.59-2.167.927zm-4.954-17.03c-1.456-.012-2.912 0-4.369-.006-.106.013-.232-.033-.319.047.014 3.111 0 6.23.007 9.342-.007.112.02.225-.027.33-.133-.02-.2-.145-.299-.218-.671-.576-1.423-1.066-2.26-1.35-.566-.219-1.158-.331-1.756-.437-.678-.014-1.363-.034-2.048.006-.073.02-.14.04-.213.047-1.522.211-2.945.92-4.116 1.893-.651.61-1.303 1.245-1.762 2.013-.538.761-.884 1.635-1.216 2.496-.153.543-.306 1.08-.373 1.635-.126.854-.073 1.728-.06 2.59.034.224.107.436.113.661a9.18 9.18 0 00.625 2.126c.246.655.645 1.251 1.011 1.847.26.33.512.675.824.966.466.457.925.954 1.51 1.272.691.523 1.51.834 2.307 1.139.293.052.565.218.864.225.253.02.486.139.739.125.133-.013.252.08.392.067.645.02 1.296.02 1.941 0 .107 0 .213-.047.326-.053.446.006.858-.166 1.29-.226.565-.205 1.17-.337 1.696-.642.778-.357 1.482-.86 2.114-1.43a8.187 8.187 0 001.922-2.49c.206-.416.439-.82.572-1.27.252-.623.365-1.285.452-1.94.146-.577.1-1.179.113-1.775V3.164zm-4.728 17.93c-.04.702-.305 1.37-.618 2-.525.986-1.41 1.741-2.414 2.218-.153.08-.352.073-.458.218-.187 0-.373.007-.552.073-.572.014-1.164.066-1.723-.092-.239-.113-.505-.16-.744-.285-.3-.166-.639-.278-.885-.53-.465-.324-.824-.768-1.15-1.225-.26-.443-.519-.9-.638-1.403-.133-.265-.12-.563-.193-.841-.02-.709-.06-1.437.106-2.126.074-.218.12-.45.2-.668.193-.351.312-.742.565-1.06.133-.278.366-.483.552-.721.499-.57 1.184-.934 1.875-1.219.26-.059.512-.191.785-.191.552-.14 1.123-.027 1.669.072.718.259 1.43.616 1.988 1.146.206.192.359.43.565.622a5.625 5.625 0 011.07 4.012zM78.4 27.265h1.743c.006.132.006.265 0 .397-.2.027-.4-.006-.592.02-.027.596 0 1.185-.013 1.781a4.773 4.773 0 00-.532-.006c-.02-.47-.014-.947-.007-1.417 0-.126.027-.272-.087-.358-.172-.026-.345.007-.518-.02a2.625 2.625 0 01.006-.397zm2.062.007c.246-.007.492-.02.738.013-.013.192.146.324.193.503.066.225.166.437.232.662.054.1.147.186.113.311.133-.516.34-1.006.546-1.49a8.47 8.47 0 01.711 0c.013.709 0 1.43 0 2.14a2.97 2.97 0 01-.485 0c.006-.497 0-.994.013-1.484-.06.053-.12.1-.166.166-.087.45-.32.86-.432 1.31-.133.02-.26.02-.393.007-.04-.251-.22-.457-.22-.715-.179-.218-.185-.53-.325-.774-.093.178-.02.39-.04.582-.026.311.033.63-.026.94-.16 0-.34.053-.466-.06.02-.701 0-1.403.007-2.111z"
></path>
</svg>
</div>
<div class="flex items-center justify-center py-2 col-span-2 md:col-auto">
<svg class="max-w-full fill-current text-gray-400" width="125" height="39" viewBox="0 0 125 39" xmlns="http://www.w3.org/2000/svg">
<path
d="M65.879 9.8a2.533 2.533 0 01-2.539 2.537 2.532 2.532 0 01-2.538-2.538 2.508 2.508 0 012.538-2.537c1.446.039 2.539 1.171 2.539 2.537zm-10.466 5.114v.624s-1.21-1.562-3.787-1.562c-4.256 0-7.576 3.24-7.576 7.73 0 4.45 3.28 7.73 7.576 7.73 2.616 0 3.787-1.601 3.787-1.601v.663c0 .313.235.546.547.546h3.163V14.365H55.96a.561.561 0 00-.547.549zm0 9.407c-.585.86-1.757 1.601-3.162 1.601-2.5 0-4.413-1.561-4.413-4.216 0-2.655 1.914-4.216 4.413-4.216 1.367 0 2.616.78 3.162 1.6v5.231zm6.053-9.954h3.749v14.678h-3.749V14.367zm55.998-.391c-2.578 0-3.788 1.562-3.788 1.562V7.301h-3.749v21.744h3.163a.558.558 0 00.547-.546v-.664s1.21 1.6 3.787 1.6c4.257 0 7.576-3.277 7.576-7.728 0-4.45-3.319-7.731-7.536-7.731zm-.625 11.907c-1.445 0-2.577-.741-3.163-1.6V19.05c.586-.78 1.835-1.6 3.163-1.6 2.499 0 4.412 1.561 4.412 4.216 0 2.654-1.913 4.216-4.412 4.216zm-8.864-5.543v8.744h-3.75V20.77c0-2.42-.78-3.396-2.888-3.396-1.132 0-2.304.585-3.047 1.445v10.228h-3.748v-14.68h2.967c.313 0 .547.274.547.548v.624c1.094-1.132 2.538-1.562 3.983-1.562 1.64 0 3.007.47 4.1 1.406 1.328 1.093 1.836 2.498 1.836 4.958zm-22.533-6.364c-2.576 0-3.787 1.562-3.787 1.562V7.301h-3.749v21.744h3.163a.559.559 0 00.547-.546v-.664s1.21 1.6 3.787 1.6c4.257 0 7.576-3.277 7.576-7.728.04-4.451-3.28-7.731-7.537-7.731zm-.625 11.907c-1.444 0-2.576-.741-3.162-1.6V19.05c.586-.78 1.835-1.6 3.162-1.6 2.5 0 4.413 1.561 4.413 4.216 0 2.654-1.913 4.216-4.413 4.216zM74.665 13.976c1.132 0 1.718.196 1.718.196v3.474s-3.124-1.055-5.076 1.171v10.267h-3.75V14.367h3.164c.312 0 .546.273.546.546v.625c.704-.82 2.227-1.562 3.398-1.562zM35.733 27.718c-.195-.468-.39-.976-.586-1.406-.313-.702-.625-1.366-.898-1.99l-.039-.04a406.921 406.921 0 00-8.63-17.644l-.117-.235c-.32-.608-.633-1.22-.937-1.835-.39-.703-.78-1.444-1.406-2.147C21.87.859 20.074 0 18.161 0c-1.953 0-3.71.86-4.998 2.342-.586.703-1.016 1.444-1.406 2.148a84.724 84.724 0 01-.936 1.835l-.118.234c-3.007 5.856-5.935 11.79-8.63 17.645l-.04.078c-.272.625-.585 1.289-.898 1.99-.195.43-.39.899-.585 1.406-.508 1.444-.664 2.81-.468 4.217a8.297 8.297 0 005.076 6.48c1.016.43 2.07.625 3.163.625.313 0 .703-.039 1.016-.078 1.288-.156 2.616-.585 3.905-1.327 1.6-.898 3.124-2.186 4.842-4.06 1.718 1.874 3.28 3.162 4.842 4.06 1.29.742 2.616 1.17 3.905 1.327.312.04.703.078 1.016.078 1.093 0 2.186-.195 3.162-.625 2.734-1.094 4.647-3.591 5.077-6.48.31-1.366.154-2.732-.353-4.177zm-17.611 2.03c-2.11-2.655-3.476-5.153-3.944-7.26-.195-.899-.235-1.68-.117-2.382a3.78 3.78 0 01.625-1.64c.742-1.054 1.991-1.718 3.436-1.718 1.445 0 2.734.625 3.437 1.718.312.468.547 1.015.625 1.64.117.703.078 1.522-.117 2.381-.47 2.069-1.837 4.568-3.945 7.26zm15.58 1.835a5.802 5.802 0 01-3.553 4.568c-.937.39-1.953.507-2.968.39-.976-.118-1.953-.43-2.967-1.015-1.406-.782-2.812-1.991-4.452-3.787 2.577-3.162 4.139-6.051 4.725-8.627a9.765 9.765 0 00.195-3.32 6.329 6.329 0 00-1.054-2.654c-1.212-1.757-3.242-2.771-5.507-2.771-2.264 0-4.295 1.054-5.505 2.771a6.335 6.335 0 00-1.055 2.655 8.107 8.107 0 00.195 3.319c.586 2.576 2.187 5.504 4.725 8.666-1.601 1.796-3.046 3.006-4.452 3.787-1.015.586-1.991.898-2.967 1.015a6.25 6.25 0 01-2.968-.39 5.802 5.802 0 01-3.553-4.568 6.457 6.457 0 01.351-3.045c.117-.39.313-.78.508-1.25.273-.624.585-1.288.898-1.951l.04-.078a425.627 425.627 0 018.59-17.528l.117-.235c.313-.585.625-1.21.937-1.795.313-.625.664-1.211 1.094-1.719.82-.936 1.913-1.444 3.124-1.444 1.21 0 2.304.508 3.124 1.444.43.51.78 1.095 1.093 1.719.313.585.626 1.21.937 1.795l.118.235a516.841 516.841 0 018.552 17.567v.039c.312.626.586 1.328.898 1.953.195.468.39.858.508 1.248.311 1.014.428 1.991.272 3.006z"
></path>
</svg>
</div>
<div class="flex items-center justify-center py-2 col-span-2 md:col-auto">
<svg class="max-w-full fill-current text-gray-400" width="113" height="30" viewBox="0 0 113 30" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 5h3.94v8.21h8.31V5h3.946v20.153H12.25V16.77H3.94v8.383H0V5zm28.678 13.589V9.912h3.736v8.677c0 3.62-3.14 6.564-7 6.564s-7-2.945-7-6.564V9.912h3.736v8.677c0 1.687 1.465 3.06 3.264 3.06 1.799 0 3.264-1.373 3.264-3.06zm14.167-8.575c4.185 0 7.784 3.28 7.784 7.57 0 4.344-3.903 7.569-8.357 7.569-4.006 0-7.573-3.168-7.573-7.794V5h3.75v6.669c1.249-1.15 2.542-1.655 4.396-1.655zm.093 11.886c2.152 0 4.096-1.99 4.096-4.317s-1.944-4.317-4.096-4.317c-2.54 0-4.483 1.99-4.483 4.317s1.943 4.317 4.483 4.317zm13.987-11c0 3.28 8.938.924 8.938 8.493 0 3.505-3.108 5.748-6.964 5.748-2.571 0-4.723-1.01-6.458-3l2.72-2.635c1.017 1.065 1.735 2.074 3.948 2.074 1.404 0 2.629-1.038 2.629-2.214 0-3.814-8.938-1.654-8.938-8.466 0-3.673 2.93-5.888 6.995-5.888 2.033 0 4.513 1.065 5.738 2.607l-2.45 2.691c-.956-.953-2.42-1.738-3.527-1.738-1.375 0-2.63.56-2.63 2.328zm18.808-1.084c4.453 0 8.357 3.224 8.357 7.57 0 4.289-3.6 7.569-7.785 7.569-1.854 0-3.147-.506-4.397-1.655V30H68.16V17.61c0-4.627 3.566-7.794 7.573-7.794zm.666 11.887c2.152 0 4.095-1.992 4.095-4.318 0-2.327-1.943-4.317-4.095-4.317-2.54 0-4.483 1.99-4.483 4.317 0 2.326 1.943 4.318 4.483 4.318zm35.285.197c.42 0 .898-.028 1.316-.055l-.927 3.196c-.359.083-1.017.112-1.496.112-3.197 0-5.527-1.599-5.527-4.767V7.995l3.795-1.598v4.066h3.437v3.083h-3.437v6.083c0 1.374.628 2.271 2.839 2.271zm-10.72-8.125c.702 1.097 1.036 2.295 1.036 3.593v.066c0 1.319-.415 2.518-1.17 3.604-.75 1.082-1.742 1.93-3.01 2.55a8.651 8.651 0 01-3.843.874h-.225c-1.228 0-2.35-.241-3.367-.637a8.644 8.644 0 01-1.439-.708l-3.238 2.913c.077.219.117.45.117.685a2.162 2.162 0 01-.743 1.615 2.674 2.674 0 01-1.797.67 2.672 2.672 0 01-1.796-.67c-.48-.431-.744-1.004-.744-1.615a2.16 2.16 0 01.743-1.615c.698-.631 1.741-.837 2.668-.527l3.133-2.824a6.582 6.582 0 01-1.223-1.91 6.758 6.758 0 01-.516-2.558v-.269c0-1.286.46-2.466 1.214-3.538a7.382 7.382 0 011.335-1.407L78.66 5.95l-.687-.469a3.53 3.53 0 01-1.686.431C74.47 5.912 73 4.588 73 2.956 73 1.323 74.47 0 76.285 0c1.816 0 3.286 1.323 3.286 2.956 0 .272-.06.53-.137.78 3.255 2.222 8.82 6.025 10.517 7.184a9.297 9.297 0 012.618-.738V6.669c-1.097-.42-1.738-1.346-1.738-2.428 0-1.474 1.337-2.668 2.976-2.668 1.637 0 2.952 1.194 2.952 2.668 0 1.082-.68 2.009-1.778 2.428v3.511a8.595 8.595 0 013.009.937c1.256.667 2.26 1.553 2.974 2.658zm-3.956 6.11c.765-.756 1.148-1.59 1.148-2.49 0-.136-.006-.277-.018-.415a3.896 3.896 0 00-.717-1.837 4.181 4.181 0 00-1.598-1.307c-.64-.295-1.318-.422-2.034-.422h-.074c-.79 0-1.5.193-2.163.587a4.23 4.23 0 00-1.562 1.537c-.352.586-.492 1.208-.492 1.863v.202c0 .666.246 1.295.698 1.87.438.587.974 1.05 1.678 1.375.624.295 1.262.457 1.915.457h.188c1.142 0 2.152-.541 3.031-1.42z"
></path>
</svg>
</div>
<div class="flex items-center justify-center py-2 col-span-2 md:col-auto col-start-2 col-end-4">
<svg class="max-w-full fill-current text-gray-400" width="109" height="33" viewBox="0 0 109 33" xmlns="http://www.w3.org/2000/svg">
<path
d="M67.43 25.591c-6.293 4.653-15.447 7.132-23.342 7.132-11.06 0-20.976-4.08-28.527-10.87-.572-.533-.077-1.258.648-.839 8.124 4.73 18.154 7.552 28.528 7.552 6.98 0 14.683-1.45 21.777-4.462 1.068-.42 1.945.724.915 1.487zm2.631-3.013c-.8-1.03-5.34-.496-7.36-.229-.611.077-.725-.457-.153-.839 3.623-2.555 9.534-1.792 10.22-.953.687.839-.19 6.789-3.584 9.61-.534.42-1.03.192-.801-.38.763-1.908 2.479-6.14 1.678-7.209zM62.815 3.585V1.106c0-.381.267-.61.61-.61h11.06c.343 0 .648.267.648.61v2.098c0 .343-.305.8-.839 1.563l-5.72 8.162c2.135-.038 4.386.267 6.293 1.335.419.229.533.61.572.953v2.632c0 .381-.382.8-.801.572-3.395-1.792-7.933-1.983-11.67.038-.382.19-.802-.19-.802-.572V15.37c0-.381 0-1.068.42-1.678l6.636-9.497h-5.759c-.343 0-.648-.267-.648-.61zm-40.313 15.37h-3.356c-.305-.038-.572-.267-.61-.572V1.144c0-.343.305-.61.648-.61h3.127c.343 0 .572.267.61.572v2.25h.077c.8-2.174 2.364-3.203 4.424-3.203 2.097 0 3.432 1.03 4.348 3.203.8-2.174 2.67-3.203 4.653-3.203 1.41 0 2.936.572 3.89 1.906 1.068 1.45.839 3.547.839 5.416v10.908c0 .343-.305.61-.649.61h-3.318c-.343-.038-.61-.305-.61-.61V9.23c0-.725.076-2.556-.076-3.242-.267-1.144-.992-1.488-1.983-1.488-.801 0-1.678.534-2.022 1.412-.343.877-.305 2.326-.305 3.318v9.153c0 .343-.305.61-.648.61h-3.356c-.344-.038-.61-.305-.61-.61V9.23c0-1.907.304-4.768-2.06-4.768-2.403 0-2.327 2.746-2.327 4.768v9.153c-.038.305-.305.572-.686.572zM84.668.153c4.996 0 7.704 4.271 7.704 9.725 0 5.263-2.975 9.458-7.704 9.458-4.882 0-7.551-4.271-7.551-9.61-.038-5.378 2.67-9.573 7.551-9.573zm0 3.546c-2.479 0-2.631 3.395-2.631 5.492 0 2.098-.039 6.598 2.593 6.598 2.593 0 2.746-3.623 2.746-5.835 0-1.449-.076-3.203-.496-4.576-.381-1.22-1.144-1.679-2.212-1.679zm14.15 15.256H95.46c-.343-.038-.61-.305-.61-.61V1.068A.66.66 0 0195.5.496h3.127c.305 0 .534.229.61.496v2.631h.077c.953-2.364 2.25-3.47 4.576-3.47 1.488 0 2.975.533 3.928 2.02.878 1.374.878 3.7.878 5.378v10.87c-.038.305-.305.534-.649.534h-3.356c-.305-.038-.572-.267-.61-.534V9.04c0-1.907.229-4.653-2.098-4.653-.8 0-1.563.534-1.945 1.373-.458 1.068-.534 2.098-.534 3.28v9.306a.698.698 0 01-.686.61zm-41.42-.038a.69.69 0 01-.8.076c-1.106-.915-1.335-1.373-1.945-2.25-1.83 1.869-3.166 2.44-5.53 2.44-2.822 0-5.035-1.754-5.035-5.224 0-2.746 1.488-4.577 3.586-5.492 1.83-.801 4.385-.954 6.33-1.182v-.42c0-.8.077-1.754-.419-2.44-.42-.611-1.182-.878-1.869-.878-1.296 0-2.44.648-2.708 2.021-.076.305-.267.61-.572.61l-3.241-.343c-.267-.076-.573-.267-.496-.686C45.46 1.182 49.009 0 52.212 0c1.64 0 3.776.42 5.073 1.678 1.64 1.526 1.487 3.585 1.487 5.797V12.7c0 1.564.648 2.25 1.259 3.128.228.305.266.686 0 .877-.725.572-1.946 1.64-2.632 2.212zm-44.088 0a.69.69 0 01-.8.076c-1.106-.915-1.335-1.373-1.946-2.25-1.83 1.869-3.165 2.44-5.53 2.44C2.212 19.184 0 17.43 0 13.96c0-2.746 1.487-4.577 3.585-5.492 1.83-.801 4.386-.954 6.331-1.182v-.42c0-.8.076-1.754-.42-2.44-.419-.611-1.182-.878-1.868-.878-1.297 0-2.441.648-2.708 2.021-.076.305-.267.61-.572.61l-3.242-.343C.839 5.76.534 5.568.61 5.15 1.373 1.182 4.92 0 8.124 0c1.64 0 3.775.42 5.072 1.678 1.64 1.526 1.487 3.585 1.487 5.797V12.7c0 1.564.649 2.25 1.259 3.128.229.305.267.686 0 .877-.725.572-1.945 1.64-2.632 2.212zm40.695-8.2v-.725c-2.441 0-4.997.534-4.997 3.395 0 1.449.763 2.44 2.06 2.44.953 0 1.792-.571 2.326-1.525.649-1.182.61-2.288.61-3.585zm-44.05 0v-.725c-2.442 0-4.997.534-4.997 3.395 0 1.449.763 2.44 2.06 2.44.953 0 1.792-.571 2.326-1.525.648-1.182.61-2.288.61-3.585z"
></path>
</svg>
</div>
</div>
</div>
<footer class="max-w-7xl mx-auto px-4 xl:px-0 mt-6">
<div class="grid sm:grid-cols-12 gap-x-8 gap-y-8 md:gap-x-4 lg:gap-x-6 py-8 md:py-12 border-t border-gray-300">
<div class="sm:col-span-12 lg:col-span-3">
<div class="mb-2">
<a class="block" aria-label="Cruip" href="/">
<img class="h-12 w-12 rounded-full" src="https://designcools.com/wp-content/uploads/2024/10/preview-KMdvyG18u-transformed-e1730702367932-300x264.png" decoding="async" alt="contact form section design" />
</a>
</div>
<div class="text-sm text-gray-600">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum incidunt distinctio ut eaque eius debitis.
</p>
</div>
</div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-gray-800 font-medium mb-2">Products</h6>
<ul class="text-sm">
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Web Studio</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">DynamicBox Flex</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Programming Forms</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Integrations</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Command-line</a></li>
</ul>
</div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-gray-800 font-medium mb-2">Resources</h6>
<ul class="text-sm">
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Documentation</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Tutorials & Guides</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Blog</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Support Center</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Partners</a></li>
</ul>
</div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
<h6 class="text-gray-800 font-medium mb-2">Company</h6>
<ul class="text-sm">
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Home</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">About us</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Company values</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Pricing</a></li>
<li class="mb-2"><a href="#0" class="text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">Privacy Policy</a></li>
</ul>
</div>
<div class="sm:col-span-6 md:col-span-3 lg:col-span-3">
<h6 class="text-gray-800 font-medium mb-2">Subscribe</h6>
<p class="text-sm text-gray-600 mb-4">Get the latest news and articles to your inbox every month.</p>
<form>
<div class="flex flex-wrap mb-4">
<div class="w-full">
<label class="block text-sm sr-only" htmlFor="newsletter">Email</label>
<div class="relative flex items-center max-w-xs">
<input id="newsletter" type="email" class="form-input w-full bg-gray-100 text-gray-800 px-3 py-2 pr-12 text-sm" placeholder="Your email" required="" />
<button type="submit" class="absolute inset-0 left-auto" aria-label="Subscribe">
<span class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300" aria-hidden="true"></span>
<svg class="w-3 h-3 fill-current text-blue-600 mx-3 shrink-0" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fillRule="nonzero"></path>
</svg>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="md:flex md:items-center md:justify-between py-4 md:py-6 border-t border-gray-300">
<ul class="flex mb-4 md:order-1 md:ml-2 md:mb-0">
<li>
<a href="https://www.twitter.com" class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out" aria-label="Twitter">
<svg class="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="m13.063 9 3.495 4.475L20.601 9h2.454l-5.359 5.931L24 23h-4.938l-3.866-4.893L10.771 23H8.316l5.735-6.342L8 9h5.063Zm-.74 1.347h-1.457l8.875 11.232h1.36l-8.778-11.232Z"></path>
</svg>
</a>
</li>
<li class="ml-2">
<a href="https://www.github.com" class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out" aria-label="Github">
<svg class="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 8.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V22c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z"
></path>
</svg>
</a>
</li>
<li class="ml-2">
<a href="https://www.facebook.com" class="flex justify-center items-center text-gray-600 hover:text-gray-900 bg-white hover:bg-white-100 rounded-full shadow transition duration-150 ease-in-out" aria-label="Facebook">
<svg class="w-8 h-8 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M14.023 24L14 17h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V14H21l-1 3h-2.72v7h-3.257z"></path>
</svg>
</a>
</li>
</ul>
<div class="text-sm text-gray-600 mr-4">© Cruip.com. All rights reserved.</div>
</div>
</footer>Preview
CONTACT ME
Have a question? Just drop me a line via email or make a WhatsApp call. I am available for new projects and interesting ideas
business00196@gmail.com
Show Code
<div class="py-20 sm:py-28 max-w-7xl mx-auto px-4 xl:px-0">
<div class="grid grid-cols-1 lg:grid-cols-2">
<div class="">
<div>
<h3 class="text-3xl border uppercase inline-flex rounded-full border-black py-2 px-6 uppercase font-extrabold">CONTACT ME</h3>
</div>
<p class="max-w-md text-[1rem] mt-8">
Have a question? Just drop me a line via email or make a WhatsApp call. I am available for new projects and interesting ideas
</p>
<p class="mt-8 flex gap-x-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 256 256">
<path
d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"
></path>
</svg>
business00196@gmail.com
</p>
</div>
<form class="mt-16 sm:mt-24 lg:mt-0">
<div class="flex flex-col sm:flex-row gap-y-6 gap-x-6">
<label class="whitespace-nowrap font-medium">YOUR NAME</label>
<input type="text" placeholder="Enter your name" class="border-b px-2 w-full focus:outline-none" />
</div>
<div class="flex flex-col sm:flex-row gap-y-6 gap-x-6 mt-12">
<label class="whitespace-nowrap font-medium">EMAIL ADDRESS</label>
<input type="text" placeholder="Enter your email" class="border-b px-2 w-full focus:outline-none" />
</div>
<div class="flex flex-col gap-y-6 mt-12">
<label class="whitespace-nowrap font-medium">WHAT'S YOUR QUESTION?</label>
<textarea rows="{4}" placeholder="Enter your message" class="border-b w-full focus:outline-none"></textarea>
</div>
<div class="flex flex-col sm:flex-row mt-12 gap-y-4 items-center gap-x-12">
<button aria-label="send msg" class="w-full bg-black text-lg p-2 sm:p-4 sm:-rotate-12 sm:rounded-full xl:min-w-40 sm:min-w-36 sm:h-36 sm:w-36 xl:h-40 xl:w-40 text-white uppercase">SEND MESSAGE</button>
<div class="text-gray-500 flex gap-x-1">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-1" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 256 256">
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"
></path>
</svg>
<p class="text-[1rem] w-[calc(100%-1.8rem)]">All the fields are required. By sending the form you agree to the Terms & Conditions and Privacy Policy.</p>
</div>
</div>
</form>
</div>
</div>Preview
Fancy this role?
Show Code
<div class="mx-auto max-w-7xl px-4 xl:px-0">
<h2 class="text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-light text-gray-900 mb-8">
<p>Fancy this role?</p>
</h2>
<form>
<div class="grid grid-cols-12 gap-y-4 border-b border-gray-300 pb-5 mt-10">
<div class="col-span-12 sm:col-span-4">
<label class="">
Name & Surname
<span class="text-primary-500 ml-px">*</span>
</label>
</div>
<input
type="text"
name="fullName"
class="col-span-12 sm:col-span-8 transition-all bg-transparent appearance-none block w-full sm:w-auto text-gray-800 leading-tight placeholder-gray-500 placeholder-opacity-100 outline-none focus:outline-none md:text-md"
placeholder="Who are you?"
required=""
/>
</div>
<div class="grid grid-cols-12 gap-y-4 border-b border-gray-300 pb-5 mt-10">
<div class="col-span-12 sm:col-span-4">
<label class="">
Email
<span class="text-primary-500 ml-px">*</span>
</label>
</div>
<input
type="text"
name="fullName"
class="col-span-12 sm:col-span-8 transition-all bg-transparent appearance-none block w-full sm:w-auto text-gray-800 leading-tight placeholder-gray-500 placeholder-opacity-100 outline-none focus:outline-none md:text-md"
placeholder="Where we can talk to you"
required=""
/>
</div>
<div class="grid grid-cols-12 gap-y-4 border-b border-gray-300 pb-5 mt-10">
<div class="col-span-12 sm:col-span-4">
<label class="">
Email
<span class="text-primary-500 ml-px">*</span>
</label>
</div>
<input
type="text"
name="fullName"
class="col-span-12 sm:col-span-8 transition-all bg-transparent appearance-none block w-full sm:w-auto text-gray-800 leading-tight placeholder-gray-500 placeholder-opacity-100 outline-none focus:outline-none md:text-md"
placeholder="Where can we reach you?"
required=""
/>
</div>
<div class="grid grid-cols-12 gap-y-4 border-b border-gray-300 pb-5 mt-10">
<label htmlFor="form-input-cv" class="col-span-12 sm:col-span-4 block text-gray-900 text-base md:text-md">
CV
<span class="text-primary-500 ml-px">*</span>
</label>
<input type="file" id="cv" name="cv" class="col-span-12 sm:col-span-8 bg-transparent ext-gray-600 transform text-sm lg:-translate-y-1 cursor-pointer" />
</div>
<div class="grid grid-cols-12 gap-y-4 border-b border-gray-300 pb-5 mt-10">
<div class="col-span-12 sm:col-span-4">
<label htmlFor="form-input-msg" class="block text-gray-900 text-base md:text-md">
Your message
</label>
</div>
<div class="col-span-12 sm:col-span-8">
<textarea
type="textarea"
name="message"
class=" transition-all bg-transparent appearance-none block text-gray-800 leading-tight min-h-20 placeholder-gray-500 placeholder-opacity-100 outline-none focus:outline-none md:text-md"
placeholder="Type your message here (Optional)"
></textarea>
</div>
</div>
<div class="">
<div class="relative sm:flex text-left pt-5">
<div class="sm:flex justify-between items-center w-full mt-5 text-sm md:text-base">
<p class="pb-2 sm:pb-0">By sending this form you accept our <a href="/privacy-policy" class="border-b hover:border-primary-500">Privacy Policy</a></p>
<button class="group mt-6 sm:mt-0 inline-flex items-center outline-none focus:outline-none text-[1.2rem] md:text-lg 2xl:text-xl">
Apply
<span class="translate-z-0 relative overflow-hidden block border border-gray-300 rounded-full py-2.5 px-6 md:py-2 md:px-4 ml-2 mt-0.5 md:ml-3">
<svg class="relative z-10 w-5 fill-current md:w-6 lg:w-8" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 15">
<path d="M29.565 7.029l-7.026 7.027-.79-.798 5.621-5.626a8.771 8.771 0 01-.014-.048c-.697-.002-1.394 0-2.091-.001H0V6.477h27.35l.022-.041-5.63-5.63.79-.806 7.033 7.029z"></path>
</svg>
<span class="absolute left-0 top-0 bg-emerald-400 transition-all w-full h-full transform -translate-x-full group-hover:translate-x-0 hidden md:block"></span>
</span>
</button>
</div>
</div>
</div>
</form>
</div>900+ Modern UI Components
Stay in the loop with everything you need to know.