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

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

Login Form - Agendamiento

Author:
Jhonatan Llamuca

1 year ago

1.4k
Login form

Author:
Rajesh Maheshwari

11 months ago

1.7k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

3k
OTPverification

Author:
Ratikanta Pradhan

7 months ago

536
Animated Sign in background
Sign-in page with floating blobs as background.

Author:
Nii Anyetei

1 year ago

3.4k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

1 year ago

2.9k
Loginpage

Author:
Ramesh Kumar Sah

4 months ago

471
Login Form simple
Login form design

Author:
QQ-VVN

9 months ago

740
login
login by : html , css

Author:
Hacker Development

9 months ago

1.5k
Login Form
Login Form

Author:
Md. Tofayel islam

1 year ago

2.3k
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

1 year ago

3k
Loginform
Animated Login Form with Google Sign-In (Tailwind CSS)

Author:
ishimwe prince

8 months ago

716

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components