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

652

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

Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

4 weeks ago

41
Sign in form
includes Google login button

Author:
Paul Intay

1 year ago

2.3k
Sign-In Form with Tailwind CSS
Elegant sign in form

Author:
Carlos

9 months ago

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

Author:
Aman kumar

2 months ago

228
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

3 months ago

570
Responsive login form with image

Author:
Lukas Müller

2 years ago

14.1k
Login
Login Creen office

Author:
Rushikesh Latpate

5 months ago

758
Payment Form

Author:
ABDO-SY

3 months ago

677
login page
modern login form by salvator

Author:
Baraka Salvator

3 weeks ago

65
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

2.7k
Login Card

Author:
Anonymous

1 year ago

6.3k
User registration form

Author:
Laurits

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components