Sign Up Account Page Using Tailwind UI
A Sign Up Page inspired by Azie Melasari’s design on Dribbble, implemented using Tailwind CSS to create a modern and appealing look.
page
Loading component...
129 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;
}
</style>
<div class="flex lg:flex-row flex-col w-full mx-auto bg-white min-h-screen p-6">
<div class="w-full lg:w-1/2 mx-10 items-center">
<nav class="relative mb-16">
<div class="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<a href="#">
<svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M13.0605 8.11073L14.4747 9.52494C17.2084 12.2586 17.2084 16.6908 14.4747 19.4244L14.1211 19.778C11.3875 22.5117 6.95531 22.5117 4.22164 19.778C1.48797 17.0443 1.48797 12.6122 4.22164 9.87849L5.63585 11.2927C3.68323 13.2453 3.68323 16.4112 5.63585 18.3638C7.58847 20.3164 10.7543 20.3164 12.7069 18.3638L13.0605 18.0102C15.0131 16.0576 15.0131 12.8918 13.0605 10.9392L11.6463 9.52494L13.0605 8.11073ZM19.778 14.1211L18.3638 12.7069C20.3164 10.7543 20.3164 7.58847 18.3638 5.63585C16.4112 3.68323 13.2453 3.68323 11.2927 5.63585L10.9392 5.98941C8.98653 7.94203 8.98653 11.1079 10.9392 13.0605L12.3534 14.4747L10.9392 15.8889L9.52494 14.4747C6.79127 11.741 6.79127 7.30886 9.52494 4.57519L9.87849 4.22164C12.6122 1.48797 17.0443 1.48797 19.778 4.22164C22.5117 6.95531 22.5117 11.3875 19.778 14.1211Z">
</path>
</svg>
</a>
</div>
</nav>
<div class="bg-white w-full sm:max-w-md px-2 sm:px-5 mx-auto">
<div class="flex-1 px-2">
<div class="text-center mb-8">
<h1 class=" text-black text-2xl font-semibold mb-2">Create your account</h1>
<p class="text-gray-600 font-normal text-base">Let's get started with your 30 days trial</p>
</div>
<button
class="w-full inline-flex font-bold text-sm items-center bg-white justify-center border border-gray-200 px-4 py-2 rounded-full cursor-pointer text-gray-700 transition duration-500 ease-in-out transform hover:-translate-x hover:scale-105">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<defs>
<path id="a"
d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z" />
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible" />
</clipPath>
<path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z" />
<path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z" />
<path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z" />
<path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z" />
</svg>
Login with Google
</button>
<h3 class="flex items-center my-8">
<span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
<span class="mx-3 text-base text-gray-600 font-medium">Or</span>
<span aria-hidden="true" class="flex-grow bg-gray-200 rounded h-0.5"></span>
</h3>
<form action="#" method="">
<label for="name" class="block mb-4">
<span class="block font-bold text-sm text-gray-700 mb-2">Name<span class="text-red-500">*</span></span>
<input type="name" placeholder="Enter your name" class="px-4 py-2.5 border shadow-sm border-gray-200 rounded-full w-full block placeholder:text-gray-200 placeholder-gray-400
focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-black text-sm
invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 peer">
</label>
<label for="email" class="block mb-4">
<span class="block font-bold text-sm text-gray-700 mb-2">Email<span class="text-red-500">*</span></span>
<input type="email" placeholder="Enter your email" class="px-4 py-2.5 border shadow-sm border-gray-200 rounded-full w-full block placeholder:text-gray-200 placeholder-gray-400
focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-black text-sm
invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 peer">
</label>
<label for="password" class="block mb-4">
<span class="block font-bold text-sm text-gray-700 mb-2">Password<span class="text-red-500">*</span></span>
<input type="password" placeholder="Enter your password" class="px-4 py-2.5 border shadow-sm border-gray-200 rounded-full w-full block placeholder:text-gray-200 placeholder-gray-400
focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-black text-sm
invalid:text-pink-700 invalid:focus:ring-pink-700 invalid:focus:border-pink-700 peer">
</label>
<div class="flex items-start mb-8">
<div class="flex items-center h-5">
<input id="terms" aria-describedby="terms" type="checkbox"
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required="">
</div>
<div class="ml-3 text-sm">
<label for="terms" class="font-semibold text-gray-800 dark:text-gray-300">I agree to all Term, Privacy
Policy and Fees</label>
</div>
</div>
<button type="button"
class="w-full inline-flex mb-4 items-center justify-center text-gray-100 font-bold leading-none bg-black rounded-full py-3 px-8 border border-transparent transform-gpu hover:-translate-y-0.5 transition-all duration-150 text-sm">
Sign Up
</button>
<div class="flex items-center text-sm font-medium">
<label class="text-gray-600 mr-2">Already have account?</label>
<a href="#" class="text-blue-400 hover:text-blue-800">Log in</a>
</div>
</form>
</div>
</div>
</div>
<div class="hidden lg:block w-full lg:w-1/2 items-center relative overflow-hidden">
<div class="absolute bottom-10 px-16 flex flex-col mx-auto justify-center text-center z-10">
<h1 class=" text-white text-4xl font-semibold mb-2">Discovering the Best Furniture for your Home</h1>
<p class="text-white font-normal text-base mb-6">Our practice is Designing Complete Envirotment exceptional
building communities and place in special situations</p>
<div class="flex flex-row items-center space-x-2">
<button
class="w-full inline-flex font-bold text-sm items-center justify-center border border-white px-1 py-2 rounded-full cursor-pointer text-white transition duration-500 ease-in-out transform hover:-translate-x hover:scale-105">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M12 1L20.2169 2.82598C20.6745 2.92766 21 3.33347 21 3.80217V13.7889C21 15.795 19.9974 17.6684 18.3282 18.7812L12 23L5.6718 18.7812C4.00261 17.6684 3 15.795 3 13.7889V3.80217C3 3.33347 3.32553 2.92766 3.78307 2.82598L12 1ZM12 3.04879L5 4.60434V13.7889C5 15.1263 5.6684 16.3752 6.7812 17.1171L12 20.5963L17.2188 17.1171C18.3316 16.3752 19 15.1263 19 13.7889V4.60434L12 3.04879ZM16.4524 8.22183L17.8666 9.63604L11.5026 16L7.25999 11.7574L8.67421 10.3431L11.5019 13.1709L16.4524 8.22183Z"
fill="rgba(255,255,255,1)"></path>
</svg>
100% Guarantee
</button>
<button
class="w-full inline-flex font-bold text-sm items-center justify-center border border-white px-2 py-2 rounded-full cursor-pointer text-white transition duration-500 ease-in-out transform hover:-translate-x hover:scale-105">
<svg class="w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M8.96456 18C8.72194 19.6961 7.26324 21 5.5 21C3.73676 21 2.27806 19.6961 2.03544 18H1V6C1 5.44772 1.44772 5 2 5H16C16.5523 5 17 5.44772 17 6V8H20L23 12.0557V18H20.9646C20.7219 19.6961 19.2632 21 17.5 21C15.7368 21 14.2781 19.6961 14.0354 18H8.96456ZM15 7H3V15.0505C3.63526 14.4022 4.52066 14 5.5 14C6.8962 14 8.10145 14.8175 8.66318 16H14.3368C14.5045 15.647 14.7296 15.3264 15 15.0505V7ZM17 13H21V12.715L18.9917 10H17V13ZM17.5 19C18.1531 19 18.7087 18.5826 18.9146 18C18.9699 17.8436 19 17.6753 19 17.5C19 16.6716 18.3284 16 17.5 16C16.6716 16 16 16.6716 16 17.5C16 17.6753 16.0301 17.8436 16.0854 18C16.2913 18.5826 16.8469 19 17.5 19ZM7 17.5C7 16.6716 6.32843 16 5.5 16C4.67157 16 4 16.6716 4 17.5C4 17.6753 4.03008 17.8436 4.08535 18C4.29127 18.5826 4.84689 19 5.5 19C6.15311 19 6.70873 18.5826 6.91465 18C6.96992 17.8436 7 17.6753 7 17.5Z"
fill="rgba(255,255,255,1)"></path>
</svg>
Free delivery Indonesia area
</button>
</div>
</div>
<div class="absolute top-0 left-0 w-full h-full bg-black opacity-40 rounded-3xl"></div>
<img class="w-full object-cover rounded-3xl"
src="https://images.unsplash.com/photo-1606744837616-56c9a5c6a6eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=435&q=80"
alt="image register">
</div>
</div>