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.2k

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

Facebook Login page
Facebook Login page

Author:
Rehman Arshad

1 year ago

2.9k
Auth Page with TailwindCSS and AlpineJS

Author:
ariaw

7 months ago

579
Login form with social login buttons

Author:
Task Master

2 years ago

19.5k
Login Form - Agendamiento

Author:
Jhonatan Llamuca

10 months ago

1.3k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

4 months ago

813
chating
chating all social media

Author:
Nirere Esther

6 months ago

368
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:
Anonymous

1 year ago

2.7k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

6 months ago

834
Login

Author:
Amine Ghanim

7 months ago

1.9k
Login oauth Form

Author:
Rihane SOLID SNAKE

5 months ago

248
Modern Sign Up 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

1 year ago

4.5k
Authentication
Tailwind CSS Authentication Beautifully designed, fully responsive, expertly crafted authentication examples

Author:
Aman kumar

7 months ago

801

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components