Form Input Costumer Information - Tailwind Component
Form input data costumer information, it is use Tailwind CSS to create this beautiful form tailwind component.
forms
Loading component...
180 lines
<div class="h-screen grid place-items-center">
<div class="w-full md:w-11/12 lg:w-8/12 sm:mx-auto rounded border mt-4 mx-8">
<div class="bg-white p-10 shadow-sm">
<h2 class="text-2xl font-bold text-gray-800 mb-8">Customer information</h2>
<div class="leading-loose">
<form class="">
<p class="text-gray-800 font-medium">Customer information</p>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:w-1/2 sm:pr-1">
<input id="first" type="text" name="first" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="first" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
First Name
</label>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:-mx-1 sm:pl-1 sm:w-1/2">
<input id="last" type="text" name="last" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="last" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
Last Name
</label>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:w-1/2 sm:pr-1">
<input id="email" type="email" name="email" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="email" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
Email Address
</label>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:-mx-1 sm:pl-1 sm:w-1/2">
<input id="phone" type="text" name="phone" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="phone" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
Phone Number
</label>
</div>
<div x-data x-init="flatpickr($refs.datetimewidget, {wrap: true, dateFormat: 'M j, Y'});"
x-ref="datetimewidget"
class="flatpickr relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:w-1/2 sm:pr-1">
<input id="datetime" type="text" name="datetime" x-ref="datetime" data-input class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="datetime" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
Date of Birth
</label>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:-mx-1 sm:pl-1 sm:w-1/2">
<input id="socialSecurity" type="text" name="socialSecurity" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="socialSecurity"
class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
Social Security
</label>
</div>
<p class="text-gray-800 font-medium">Address</p>
<div class="relative h-10 input-component mb-5 empty mt-2">
<input id="address" type="text" name="address" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="address" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
Street Address
</label>
</div>
<div class="relative h-10 input-component mb-5 empty inline-block mt-2 w-1/4 pr-1">
<input id="apertNumber" type="text" name="apertNumber" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="apertNumber" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
Apert Num
</label>
</div>
<div class="relative h-10 input-component mb-5 empty inline-block mt-2 -mx-1 pl-1 pr-1 w-1/4">
<input id="zip" type="text" name="zip" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="zip" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
ZIP Code
</label>
</div>
<div class="relative h-10 input-component mb-5 empty inline-block mt-2 -mx-1 pl-1 w-1/2">
<input id="state" type="text" name="state" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500
focus:border-green-500 rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="state" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
State
</label>
</div>
<p class="text-gray-800 font-medium">Idenfication</p>
<div role="radioGroup">
<div class="relative h-10 input-component mb-5 empty sm:inline-block sm:w-1/2 sm:pr-1">
<div class="inline-flex items-center border w-full py-2 px-4 rounded-md">
<div class="bg-white rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mr-4">
<input aria-labelledby="identitas" checked type="radio" type="radio" name="identitas"
class="checkbox appearance-none focus:opacity-100 focus:ring-2 focus:ring-offset-2 focus:ring-green-700 focus:outline-none text-green-500 border rounded-full border-gray-400 absolute cursor-pointer w-full h-full checked:border-none" />
<div class="check-icon hidden border-4 border-green-700 rounded-full w-full h-full z-1"></div>
</div>
<span class="text-sm text-gray-500">Driver License</span>
</div>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:-mx-1 sm:pl-1 sm:w-1/2">
<div class="inline-flex items-center border w-full py-2 px-4 rounded-md">
<div class="bg-white rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mr-4">
<input aria-labelledby="identitas" type="radio" name="identitas"
class="checkbox appearance-none focus:opacity-100 focus:ring-2 focus:ring-offset-2 focus:ring-green-700 focus:outline-none text-green-500 border rounded-full border-gray-400 absolute cursor-pointer w-full h-full checked:border-none" />
<div class="check-icon hidden border-4 border-green-700 rounded-full w-full h-full z-1"></div>
</div>
<span class="text-sm text-gray-500">Non-Driver / State Id</span>
</div>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block sm:w-1/2 sm:pr-1">
<div class="inline-flex items-center border w-full py-2 px-4 rounded-md">
<div class="bg-white rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mr-4">
<input aria-labelledby="identitas" type="radio" name="identitas"
class="checkbox appearance-none focus:opacity-100 focus:ring-2 focus:ring-offset-2 focus:ring-green-700 focus:outline-none text-green-500 border rounded-full border-gray-400 absolute cursor-pointer w-full h-full checked:border-none" />
<div class="check-icon hidden border-4 border-green-700 rounded-full w-full h-full z-1"></div>
</div>
<span class="text-sm text-gray-500">US Military</span>
</div>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:-mx-1 sm:pl-1 sm:w-1/2">
<div class="inline-flex items-center border w-full py-2 px-4 rounded-md">
<div class="bg-white rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mr-4">
<input aria-labelledby="identitas" type="radio" name="identitas"
class="checkbox appearance-none focus:opacity-100 focus:ring-2 focus:ring-offset-2 focus:ring-green-700 focus:outline-none text-green-500 border rounded-full border-gray-400 absolute cursor-pointer w-full h-full checked:border-none" />
<div class="check-icon hidden border-4 border-green-700 rounded-full w-full h-full z-1"></div>
</div>
<span class="text-sm text-gray-500">US Passport</span>
</div>
</div>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:w-1/2 sm:pr-1">
<input id="identitas" type="text" name="identitas" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="idNumber" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
ID Number
</label>
</div>
<div class="relative h-10 input-component mb-5 empty sm:inline-block mt-2 sm:-mx-1 sm:pl-1 sm:w-1/2">
<input id="idState" type="text" name="identitas" class="h-full w-full border-gray-300 px-2 transition-all hover:border-gray-500 focus:border-green-500
rounded-md focus:ring-0 group focus:outline-0 border text-sm" />
<label for="idState" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
ID State
</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="py-2 my-4"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/themes/airbnb.min.css">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
<style>
label {
transform: translateY(-50%);
}
.empty input:not(:focus)+label {
top: 50%;
transform: translateY(-50%);
color: rgb(121, 121, 121);
}
.checkbox:checked {
border: none;
}
.checkbox:checked+.check-icon {
display: flex;
}
</style>
<script>
const allInputs = document.querySelectorAll('input');
for (const input of allInputs) {
input.addEventListener('input', () => {
const val = input.value
if (!val) {
input.parentElement.classList.add('empty')
} else {
input.parentElement.classList.remove('empty')
}
})
}
</script>