Home
ABDO-SY
Sign up Form - Page

Sign up Form - Page

This tailwind example is contributed by ABDO-SY, on 25-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author ABDO-SY

1.5k

Fork Fullscreen

<section class="bg-[#200052]  "><svg viewBox="0 0 1437 116" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M0.0415039 108.599L15 93.6191C29.9584 78.8634 59.8754 48.5667 89.7923 33.8111C119.709 18.831 149.626 18.8309 179.543 18.8309C209.46 18.8309 239.377 18.831 269.294 45.7614C299.211 72.6919 337.083 42.1423 367 69.0728C373 111.573 434.625 87.672 464.542 81.6687C494.458 75.8899 541.125 84.474 571.042 81.6687C600.958 78.8634 636.083 126.385 666 108.599C695.917 90.4772 700.583 108.767 730.5 93.6191C760.417 78.4707 791.083 72.8602 821 93.6191C850.917 114.378 867.633 60.9098 897.55 63.715C927.467 66.5203 948.083 87.8403 978 63.715C1007.92 39.5898 1047.13 42.9562 1077.05 42.7879C1106.97 42.9562 1136.89 66.5203 1166.8 63.715C1196.72 60.9098 1226.64 30.6131 1256.55 39.7582C1286.47 48.5667 1316.39 96.8171 1346.3 111.573C1376.22 126.553 1381.54 90.6455 1396.5 81.6687L1436.05 90.6455V0.877274H1421.1C1406.14 0.877274 1376.22 0.877274 1346.3 0.877274C1316.39 0.877274 1286.47 0.877274 1256.55 0.877274C1226.64 0.877274 1196.72 0.877274 1166.8 0.877274C1136.89 0.877274 1106.97 0.877274 1077.05 0.877274C1047.13 0.877274 1017.22 0.877274 987.3 0.877274C957.384 0.877274 927.467 0.877274 897.55 0.877274C867.633 0.877274 837.716 0.877274 807.799 0.877274C777.882 0.877274 747.965 0.877274 718.048 0.877274C688.131 0.877274 658.214 0.877274 628.297 0.877274C598.38 0.877274 568.463 0.877274 538.546 0.877274C508.629 0.877274 478.713 0.877274 448.796 0.877274C418.879 0.877274 388.962 0.877274 359.045 0.877274C329.128 0.877274 299.211 0.877274 269.294 0.877274C239.377 0.877274 209.46 0.877274 179.543 0.877274C149.626 0.877274 119.709 0.877274 89.7923 0.877274C59.8754 0.877274 29.9584 0.877274 15 0.877274H0.0415039V108.599Z"
      fill="#7A0BC0"></path>
  </svg>
  <form class="flex rounded-[30px] mx-auto p-5 flex-col items-center gap-5 bg-[#270082] w-[700px] ">
    <h1 class="pt-7 mx-auto text-white text-6xl font-bold font-['Quicksand'] tracking-widest">Sign up</h1>
    <div class="flex w-full gap-16">
      <div class="flex  flex-col gap-2 w-full ">
        <label class="w-full text-white text-[20px] font-medium font-['Quicksand'] tracking-wide">First Name</label><input placeholder="John" class="w-full text-white bg-[#270082] focus:border-[#fff] outline-none bg-lime-[#270082] outl0ine-[#000] py-3 px-8 text-xl rounded-[50px] border-[3px] border-[#7A0BC0]" type="text">
      </div>
      <div class="flex  flex-col gap-2 w-full ">
        <label class="w-full text-white text-[20px] font-medium font-['Quicksand'] tracking-wide">Last Name</label><input placeholder="Deera" class="w-full text-white bg-[#270082] focus:border-[#fff] outline-none bg-lime-[#270082] outl0ine-[#000] py-3 px-8 text-xl rounded-[50px] border-[3px] border-[#7A0BC0]" type="text">
      </div>
    </div>
    <div class="flex  flex-col gap-2 w-full ">
      <label class="w-full text-white text-[20px] font-medium font-['Quicksand'] tracking-wide">Email</label><input placeholder="johndeere@email.com" class="w-full text-white bg-[#270082] focus:border-[#fff] outline-none bg-lime-[#270082] outl0ine-[#000] py-3 px-8 text-xl rounded-[50px] border-[3px] border-[#7A0BC0]" type="email">
    </div>
    <div class="flex  flex-col gap-2 w-full ">
      <label class="w-full text-white text-[20px] font-medium font-['Quicksand'] tracking-wide">Password</label><input placeholder="**************" class="w-full text-white bg-[#270082] focus:border-[#fff] outline-none bg-lime-[#270082] outl0ine-[#000] py-3 px-8 text-xl rounded-[50px] border-[3px] border-[#7A0BC0]" type="password">
    </div>
    <div class="flex  flex-col gap-2 w-full ">
      <label class="w-full text-white text-[20px] font-medium font-['Quicksand'] tracking-wide">Confirm Password</label><input placeholder="**************" class="w-full text-white bg-[#270082] focus:border-[#fff] outline-none bg-lime-[#270082] outl0ine-[#000] py-3 px-8 text-xl rounded-[50px] border-[3px] border-[#7A0BC0]" type="password">
    </div>
    <div class="flex gap-2   items-center w-[505px] h-[38px] ">
      <input type="checkbox" class="w-[23px] h-[23px] appearance-none bg-[#270082] border-2 border-[#7a0bc0] rounded-[5px]    checked:bg-[#7a0bc0] checked:border-[#270082] focus:ring-2 focus:ring-[#7a0bc0] transition"><span class="  text-white text-[15px] font-normal font-['Quicksand'] tracking-tight">I hereby confirm that I have read all the Terms &amp; Conditions carefully and I agree with the same.</span>
    </div>
    <button class="w-[300px] h-[62px]  bg-gradient-to-r from-[#7a0bc0] to-[#fa58b6] rounded-[10px] shadow-[4px_4px_60px_0px_rgba(0,0,0,0.25)] justify-center items-center gap-2.5 inline-flex text-white text-[32px] font-bold font-['Quicksand'] tracking-wide">Sign up</button><span class="text-white text-[15px] font-medium font-['Quicksand'] tracking-tight">Already have a account ? <span class="text-[#fa58b6] cursor-pointer text-[15px] font-medium font-['Quicksand'] underline tracking-tight">Login</span></span>
  </form><svg viewBox="0 0 1190 195" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M0 35L51 18.1756C70.8333 36.1083 79.3333 0.243001 119 9.33327C158.667 18.4235 198.333 0.243002 238 0.490919C277.667 0.243002 317.333 18.4235 357 18.1756C396.667 18.4235 436.333 0.243003 476 13.7131C515.667 26.6874 555.333 71.3124 595 88.6666C634.667 106.021 674.333 97.7568 714 93.0464C753.667 88.6666 793.333 88.6665 833 71.0645C872.667 53.1318 912.333 18.4235 952 9.33327C991.667 0.243001 1031.33 18.4235 1071 22.5555C1110.67 26.6874 1150.33 18.4235 1170.17 13.7131L1190 9.33327V194.444H1170.17C1150.33 194.444 1110.67 194.444 1071 194.444C1031.33 194.444 991.667 194.444 952 194.444C912.333 194.444 872.667 194.444 833 194.444C793.333 194.444 753.667 194.444 714 194.444C674.333 194.444 634.667 194.444 595 194.444C555.333 194.444 515.667 194.444 476 194.444C436.333 194.444 396.667 194.444 357 194.444C317.333 194.444 277.667 194.444 238 194.444C198.333 194.444 158.667 194.444 119 194.444C79.3333 194.444 39.6667 194.444 19.8333 194.444H0V35Z"
      fill="#7A0BC0"></path>
  </svg>
</section>

Related Examples

Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.6k
Simple Login Form
Login Form Responsive Component

Author:
Ahita Bisma Adlula

1 year ago

1.5k
Login

Author:
Amine Ghanim

11 months ago

1.3k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
Anonymous

11 months ago

584
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
AyDin VM

2 years ago

8.3k
Tailwind login form with image
basic form design useful for rapid prototyping.

Author:
Abigail

2 years ago

13k
Login oauth Form

Author:
Rihane SOLID SNAKE

8 months ago

530
Login form

Author:
Leon Bachmann

3 years ago

13.5k
Loginpage

Author:
Ramesh Kumar Sah

5 months ago

472
Quick Signup Form

Author:
Paul Intay

2 years ago

2.9k
Login Form
Login Form

Author:
Md. Tofayel islam

1 year ago

2.3k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

8 months ago

774

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components