Contact Us form Modal Using Tailwind UI
The Tailwind Component Contact Us Form Modal is a UI component designed with Tailwind style, presenting an interactive ‘Contact Us’ form in a modal format. inspiration design by Jordan Hughes from Dribbble.
form
Loading component...
114 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.-z-1 {
z-index: -1;
}
.origin-0 {
transform-origin: 0%;
}
input:focus~label,
input:not(:placeholder-shown)~label,
textarea:focus~label,
textarea:not(:placeholder-shown)~label,
select:focus~label,
select:not([value='']):valid~label {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-scale-x: 0.75;
--tw-scale-y: 0.75;
--tw-translate-y: -1.5rem;
}
input:focus~label,
select:focus~label {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
left: 0px;
}
</style>
<div class="fixed top-0 left-0 w-full h-screen m-0 p-0 -z-10">
<img class="w-full h-full object-cover opacity-20" src="https://images.unsplash.com/photo-1615406308854-4805ac35ef25?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=871&q=80" alt="">
</div>
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-8">
<div class="relative p-6 bg-purple-700 shadow-xl ring-1 ring-gray-900/5 sm:max-w-md sm:mx-auto sm:rounded-lg">
<div class="w-full mx-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex space-x-2 items-center sm:justify-center text-sm text-white">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C13.4702 20 14.8478 19.6034 16.0316 18.9114L15.0237 17.1835C14.1359 17.7026 13.1027 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12V13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13V9H14.6458C13.9407 8.37764 13.0144 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C13.0465 16 13.9991 15.5982 14.7119 14.9404C15.2622 15.5886 16.0831 16 17 16C18.6569 16 20 14.6569 20 13V12ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10Z"
fill="#fff">
</path>
</svg>
<h4 class="text-xl font-semibold">Company</h4>
</div>
<div
class="float-right rounded-md bg-white bg-opacity-20 p-2 cursor-pointer flex items-center text-center hover:bg-indigo-900 hover:text-white hover:border-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" fill="#fff" />
</svg>
</div>
</div>
<div class="divide-y divide-gray-300/50 py-2">
<div class="text-base leading-7 space-y-4 text-left flex flex-col text-white">
<h1 class="text-3xl font-bold">We'll get your business set up in less than 24 hours</h1>
<p class="text-base font-medium">Sound imposible, right? Wait until you see how easy it is to run your
business in Company.</p>
<form class="w-full mx-auto text-white">
<div class="relative z-0 w-full mb-5">
<input type="text" name="name" placeholder=" " required
class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-gray-50 border-gray-200" />
<label for="name" class="absolute duration-300 top-3 -z-1 origin-0 text-sm">Name</label>
<span class="text-sm text-red-600 hidden" id="error">Name is required</span>
</div>
<div class="relative z-0 w-full mb-5">
<input type="email" name="email" placeholder=" " required
class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-gray-50 border-gray-200" />
<label for="email" class="absolute duration-300 top-3 -z-1 origin-0 text-sm">Email</label>
<span class="text-sm text-red-600 hidden" id="error">Email is required</span>
</div>
<div class="relative z-0 w-full mb-5">
<input type="no_telp" name="no_telp" placeholder=" " required
class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-gray-50 border-gray-200" />
<label for="no_telp" class="absolute duration-300 top-3 -z-1 origin-0 text-sm">No Telp</label>
<span class="text-sm text-red-600 hidden" id="error">no telp is required</span>
</div>
<div class="relative z-0 w-full mb-5">
<textarea name="message" placeholder=" " required rows="3 "
class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-gray-50 border-gray-200"></textarea>
<label for="message" class="absolute duration-300 top-3 -z-1 origin-0 text-sm">How can we help?</label>
<span class="text-sm text-red-600 hidden" id="error">message is required</span>
</div>
</form>
<button
class="font-semibold px-16 py-2.5 shadow-lg bg-purple-200 text-purple-700 hover:text-purple-900 hover:bg-purple-50 rounded-full">
Get started
</button>
<small class="text-center text-purple-200 mx-8">Prefer email? <span
class="underline cursor-pointer hover:text-purple-50">[email protected]</span></small>
</div>
</div>
</div>
</div>
</div>