Form Card Sign Up Using Tailwind UI
A Form Card Sign Up component created with Tailwind provides an attractive and organized form layout for users to easily register and sign up, enhancing the user experience during the registration process.
signup
Loading component...
109 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(0, 0, 255, var(--tw-text-opacity));
left: 0px;
}
</style>
<!-- inspired design by https://dribbble.com/shots/16097562-Form-Elements -->
<div class="flex flex-col justify-center min-h-screen py-8 bg-gray-50">
<div class="relative p-6 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-md sm:mx-auto rounded-3xl">
<div class="w-full mx-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2 text-sm text-gray-900 sm:justify-center">
<svg class="w-5 h-5 text-blue-500 stroke-current" 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-sm font-semibold">Company</h4>
</div>
<div class="items-center float-right text-sm font-medium">
Have account? <a href="#" class="ml-1 text-blue-500 hover:text-blue-800">Log In</a>
</div>
</div>
<div class="pt-10 pb-2 divide-y divide-gray-300/50">
<div class="flex flex-col space-y-4 text-base leading-7 text-left text-gray-900">
<h1 class="text-3xl font-bold">Manage your freelance business with us!</h1>
<p class="text-base font-medium text-gray-600">Takes less than 10 minutes to fill out all the
information needed to register your business.
</p>
<form class="w-full mx-auto text-gray-700">
<div class="relative z-0 w-full mb-5">
<input type="email" name="email" placeholder=" " required
class="block w-full px-0 pt-3 pb-2 mt-0 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-800" />
<label for="email"
class="absolute text-base font-medium duration-300 top-5 -z-1 origin-0">Email</label>
<span class="hidden text-sm text-red-600" id="error">Email is required</span>
</div>
<div class="relative z-0 w-full mb-5">
<input type="text" name="name" placeholder=" " required
class="block w-full px-0 pt-3 pb-2 mt-0 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-800" />
<label for="name"
class="absolute text-base font-medium duration-300 top-5 -z-1 origin-0">Full
name</label>
<span class="hidden text-sm text-red-600" id="error">Name is required</span>
</div>
<div class="relative z-0 w-full mb-10">
<input type="no_telp" name="no_telp" placeholder=" " required
class="block w-full px-0 pt-3 pb-2 mt-0 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-800" />
<label for="no_telp"
class="absolute text-base font-medium duration-300 top-5 -z-1 origin-0">Password</label>
<span class="hidden text-sm text-red-600" id="error">no telp is required</span>
</div>
</form>
<button
class="px-16 py-4 font-semibold text-blue-100 bg-blue-600 rounded-lg shadow-lg hover:text-blue-50 hover:bg-blue-900">
Get started
</button>
<p class="mx-2 text-sm font-medium text-left text-gray-600">By signing up you are agreeing to
our <br> <span class="font-bold text-blue-500 cursor-pointer hover:text-blue-900">Terms and
Conditions</span>
</p>
</div>
</div>
</div>
</div>
</div>