Sign Up Components: Taco Component Library

Signup - 1

<div class="grid max-w-md w-full gap-6 px-12 max-sm:px-6 py-8 rounded-lg dark:text-zinc-100 text-zinc-800 sm:ring-1 ring-zinc-300 dark:ring-zinc-800 m-4 bg-[#fafafa] dark:bg-[#111]">
    <h2 class="text-4xl font-bold my-4 mb-6">Sign up</h2>
    <div class="grid gap-1 w-full dark:text-gray-200">
        <label for="name" class="">Full Name</label>
        <input id="name" type="text" placeholder="Full name" class="placeholder:text-gray-500 placeholder:font-normal border-zinc-300 dark:border-zinc-700 focus-visible:outline-zinc-500 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-zinc-500 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
    </div>
    <div class="grid gap-1 w-full dark:text-gray-200">
        <label for="email" class="">Email</label>
        <input id="email" type="email" placeholder="Email" class="placeholder:text-gray-500 placeholder:font-normal border-zinc-300 dark:border-zinc-700 focus-visible:outline-zinc-500 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-zinc-500 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
    </div>
    <div class="grid gap-1 w-full dark:text-gray-200">
        <label for="password" class="">Password</label>
        <input id="password" type="password" placeholder="Password" class="placeholder:text-gray-500 placeholder:font-normal border-zinc-300 dark:border-zinc-700 focus-visible:outline-zinc-500 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-zinc-500 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
    </div>
    <button class="bg-zinc-800 dark:bg-zinc-50 text-white w-full mx-auto font-semibold dark:text-black mt-2 hover:border-black focus-visible:outline-black/50 px-6 py-2 rounded-md border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline active:scale-[0.99]">
        Create account
    </button>
    <div class="flex items-baseline justify-between text-sm font-semibold">
        Already have an account ?
        <a href="#" class="underline">Sign in</a>
    </div>
    <div class="flex justify-between items-center">
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
        <span class="mx-2.5 dark:text-zinc-200 -translate-y-0.5">OR</span>
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
    </div>
    <div class="flex gap-4 text-center">
        <button class="bg-blue-500 dark:bg-blue-500 text-white w-full mx-auto font-semibold mt-2 px-6 py-2 rounded-md border-[1.5px] border-transparent transition-colors duration-100">
            Facebook
        </button>
        <button class="bg-red-500 text-white w-full mx-auto font-semibold mt-2 px-6 py-2 rounded-md border-[1.5px] border-transparent transition-colors duration-100">
            Google
        </button>
    </div>
</div>

Signup - 2

<div class="grid max-w-md w-full gap-4 px-12 max-sm:px-6 py-8 rounded-lg dark:text-zinc-100 text-zinc-800 dark:shadow-zinc-800 shadow shadow-zinc-300 m-4 bg-[#fafafa] dark:bg-[#111]">
    <h2 class="text-4xl font-bold my-4 mb-6">Sign Up</h2>
    <div class="relative max-w-sm w-full dark:text-gray-200/70 mb-8">
        <input id="fullname" type="text" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
        <!-- Change Background color of label to match with your site color -->
        <label for="fullname" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
  Full Name
</label>
    </div>
    <div class="relative max-w-sm w-full dark:text-gray-200/70 mb-8">
        <input id="email" type="email" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
        <!-- Change Background color of label to match with your site color -->
<label for="email" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
  Email
</label>
    </div>
    <div class="relative max-w-sm w-full dark:text-gray-200/70 mb-4">
        <input id="password" type="password" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
        <!-- Change Background color of label to match with your site color -->
        <label for="password" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0">
  Password
</label>
    </div>

    <button
        class="bg-[#111] dark:bg-white dark:text-[#111] dark:hover:bg-[#111] dark:hover:text-white hover:text-[#111] hover:bg-white text-white hover:border-[#111] dark:hover:border-white focus-visible:outline-[#111]/50 dark:focus-visible:outline-white/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline active:scale-[0.99]">
        Create account
    </button>
    <div class="flex text-sm font-semibold">
        <a href="#" class="hover:underline">Create account</a>
        <a href="#" class="hover:underline inline-block ml-auto">Forgot Password?</a>
    </div>

    <div class="flex justify-between items-center">
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
        <span class="mx-2.5 dark:text-zinc-200 -translate-y-0.5">OR</span>
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
    </div>
    <div class="flex justify-center gap-4 text-center">
        <button class="bg-zinc-900 dark:bg-zinc-300 text-white dark:text-zinc-900 font-semibold mt-2 px-2 py-2 rounded-full border-[1.5px] border-transparent transition-colors duration-100">
            <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px"> <path fill="currentColor" d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z" /> </svg>
        </button>
        <button class="bg-zinc-900 dark:bg-zinc-300 text-white dark:text-zinc-900 font-semibold mt-2 px-2 py-2 rounded-full border-[1.5px] border-transparent transition-colors duration-100">
            <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path fill="currentColor" d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z" /> </svg>
        </button>
    </div>
</div>

Signup-3

<div class="grid max-w-xl w-full gap-4 px-12 max-sm:px-6 py-8 rounded-lg dark:text-zinc-100 text-zinc-800 dark:shadow-zinc-800 shadow shadow-zinc-300 m-4 bg-[#fafafa] dark:bg-[#111]">
    <h2 class="text-4xl font-bold my-2 mb-6">Sign Up</h2>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3">
        <div class="relative w-full dark:text-gray-200/70 mb-8">
            <input id="firstname" type="text" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
            <!-- Change Background color of label to match with your site color -->
            <label for="firstname" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
            First Name
            </label>
        </div>
        <div class="relative w-full dark:text-gray-200/70 mb-8">
            <input id="lastname" type="text" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
            <!-- Change Background color of label to match with your site color -->
            <label for="lastname" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
            Last Name
            </label>
        </div>
    </div>
    <div class="relative w-full dark:text-gray-200/70 mb-8">
        <input id="email" type="email" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
        <!-- Change Background color of label to match with your site color -->
        <label for="email" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
        Email
        </label>
    </div>
    <div class="relative w-full dark:text-gray-200/70 mb-4">
        <input id="password" type="password" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
        <!-- Change Background color of label to match with your site color -->
        <label for="password" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
        Password
        </label>
    </div>
    <div class="relative w-full dark:text-gray-200/70 mb-4">
        <input id="confirm-password" type="password" class="peer border-gray-400 w-full dark:border-zinc-700 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
        <!-- Change Background color of label to match with your site color -->
        <label for="confirm-password" class="bg-[#fafafa] dark:bg-[#111] text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
        Confirm Password
        </label>
    </div>

    <button
        class="bg-[#111] dark:bg-white dark:text-[#111] dark:hover:bg-[#111] dark:hover:text-white hover:text-[#111] hover:bg-white text-white hover:border-[#111] dark:hover:border-white focus-visible:outline-[#111]/50 dark:focus-visible:outline-white/50 px-5 sm:py-2 py-1 font-semibold rounded border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline">
        Create account
    </button>
    <div class="flex text-sm font-semibold mx-auto mt-3">
        Already have an account ?
        <a href="#" class="underline ml-2">Sign in</a>
    </div>

    <div class="flex justify-between items-center">
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
        <span class="mx-2.5 dark:text-zinc-200 -translate-y-0.5">OR</span>
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
    </div>
    <div class="flex justify-center gap-4 text-center">
        <button class="bg-zinc-900 dark:bg-zinc-300 text-white w-fit h-fit dark:text-zinc-900 font-semibold mt-2 px-2 py-2 rounded-full border-[1.5px] border-transparent transition-colors duration-100">
            <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px"> <path fill="currentColor" d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z" /> </svg>
        </button>
        <button class="bg-zinc-900 dark:bg-zinc-300 text-white w-fit h-fit dark:text-zinc-900 font-semibold mt-2 px-2 py-2 rounded-full border-[1.5px] border-transparent transition-colors duration-100">
            <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path fill="currentColor" d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z" /> </svg>
        </button>
    </div>
</div>

Signup-4

<div class="grid max-w-xl w-full gap-4 px-12 max-sm:px-6 py-6 rounded-lg dark:text-zinc-100 text-zinc-800 dark:shadow-zinc-800 shadow shadow-zinc-300 m-4 bg-[#fafafa] dark:bg-[#111]">
    <h2 class="text-4xl font-bold my-2 mb-6 text-center">Create account</h2>
    <div class="grid gap-6">
        <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-3">
            <input id="firstName" type="text" placeholder="First Name" 	class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-zinc-300 dark:border-zinc-700 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent w-full" />
            <input id="lastName" type="text" placeholder="Last Name" 	class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-zinc-300 dark:border-zinc-700 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent w-full" />
        </div>
        <input id="email" type="email" placeholder="Email" 	class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-zinc-300 dark:border-zinc-700 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent w-full" />
        <input id="password" type="password" placeholder="Password" 	class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-zinc-300 dark:border-zinc-700 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent w-full" />
        <input id="ConfirmPassword" type="password" placeholder="Confirm Password" 	class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-zinc-300 dark:border-zinc-700 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent w-full" />
        <input id="mobile" type="tel" placeholder="Mobile" 	class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-zinc-300 dark:border-zinc-700 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent w-full" />
        <input id="socialLink" type="url" placeholder="Social Profile Link" 	class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-zinc-300 dark:border-zinc-700 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent w-full" />
    </div>
    <button
        class="bg-[#111] font-semibold dark:bg-white dark:text-[#111] dark:hover:bg-[#111] dark:hover:text-white hover:text-[#111] hover:bg-white text-white hover:border-[#111] dark:hover:border-white focus-visible:outline-[#111]/50 dark:focus-visible:outline-white/50 px-5 sm:py-2.5 py-1 rounded border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline">
        Create account
    </button>
    <div class="flex text-sm font-semibold mx-auto mt-3">
        Already have an account ?
        <a href="#" class="underline ml-2">Sign in</a>
    </div>

    <div class="flex justify-between items-center">
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
        <span class="mx-2.5 dark:text-zinc-200 -translate-y-0.5">OR</span>
        <span class="h-[1px] basis-full bg-zinc-300 dark:bg-zinc-600"></span>
    </div>
    <div class="flex justify-center gap-4 text-center">
        <button class="bg-zinc-900 dark:bg-zinc-300 text-white dark:text-zinc-900 font-semibold mt-2 px-2 py-2 w-fit h-fit rounded-full border-[1.5px] border-transparent transition-colors duration-100 shrink-0">
            <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px"> <path fill="currentColor" d="M25,3C12.85,3,3,12.85,3,25c0,11.03,8.125,20.137,18.712,21.728V30.831h-5.443v-5.783h5.443v-3.848 c0-6.371,3.104-9.168,8.399-9.168c2.536,0,3.877,0.188,4.512,0.274v5.048h-3.612c-2.248,0-3.033,2.131-3.033,4.533v3.161h6.588 l-0.894,5.783h-5.694v15.944C38.716,45.318,47,36.137,47,25C47,12.85,37.15,3,25,3z" /> </svg>
        </button>
        <button class="bg-zinc-900 dark:bg-zinc-300 text-white dark:text-zinc-900 font-semibold mt-2 px-2 py-2 w-fit h-fit rounded-full border-[1.5px] border-transparent transition-colors duration-100 shrink-0">
            <?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path fill="currentColor" d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z" /> </svg>
        </button>
    </div>
</div>