Tailwind Sign in / Sign up Components (408)

Sign in / Sign up from Acros

Split-screen account creation form with photo panel

A split-screen sign-up component with a left-side form for email, password, repeat password, and terms agreement, plus a teal Get Started button. The right side shows a dimmed photograph of a woman at a laptop with overlaid heading and supporting text.

<section class="relative">
  <div class="container px-4 mx-auto">
    <div class="max-w-md mx-auto lg:mx-0 py-18">
      <div class="mb-6">
        <span class="text-sm font-semibold uppercase">
          <span>create an</span>
          <span class="text-green-500">account</span>
        </span>
        <h4 class="max-w-xs font-heading text-3xl sm:text-4xl mt-2">Join our community</h4>
      </div>
      <form action="">
        <div class="mb-4">
          <label class="block text-sm leading-6 mb-2" for="">E-mail address</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="email" placeholder="Type e-mail">
        </div>
        <div class="mb-4">
          <label class="block text-sm leading-6 mb-2" for="">Password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Type password">
        </div>
        <div class="mb-6">
          <label class="block text-sm leading-6 mb-2" for="">Repeat password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Repeat password">
        </div>
        <div class="flex items-center mb-6">
          <input class="w-4 h-4" type="checkbox" value="">
          <label class="ml-4 text-sm" for="">
            <span>By signing up, you agree to our</span>
            <a class="font-medium hover:underline" href="#">Terms,</a><a class="font-medium hover:underline" href="#">Data Policy,</a><a class="font-medium hover:underline" href="#">and Cookies Policy</a>
          </label>
        </div>
        <div class="text-right">
          <button class="block w-full py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" type="submit">Get Started</button>
        </div>
      </form>
    </div>
  </div>
  <div class="relative lg:absolute top-0 right-0 lg:w-1/2 h-112 lg:h-full">
    <img class="absolute top-0 left-0 w-full h-full object-cover" src="acros-assets/images/forms/work.jpg" alt="">
    <div class="absolute bottom-0 left-0 p-8 lg:p-20">
      <h3 class="max-w-sm font-heading text-3xl sm:text-4xl text-white mb-4">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
      <p class="max-w-md text-lg leading-8 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
  </div>
</section>

Sign in / Sign up from Bendis

Tailwind CSS

Bendis

Split-screen sign-in page with marketing headline and social login options

A split-screen authentication section with a bold marketing headline and body copy on the left and a white sign-in card on the right containing email and password fields, a terms checkbox, a yellow sign-in button, and Facebook and Twitter login buttons over a red textured background.

<section class="relative py-24 bg-blue-50">
  <img class="hidden lg:block absolute top-0 right-0 w-2/5 h-full object-cover clip-path-left" src="https://images.unsplash.com/photo-1544159465-672a2b0d5f2c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg">
          <h2 class="mb-10 text-4xl font-bold font-heading text-blue-800">Take quick action that increases your brand's regular profit.</h2>
          <p class="text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="p-6 lg:p-16 bg-white">
          <form action="#">
            <span class="inline-block uppercase text-blue-400 font-semibold tracking-widest">Sign In</span>
            <h3 class="mb-4 text-2xl font-bold font-heading text-blue-800">Join our community</h3>
            <input class="block w-full py-4 pl-6 mb-2 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="email" placeholder="E-mail address">
            <input class="block w-full py-4 pl-6 mb-6 text-sm placeholder-blue-400 text-blue-400 bg-blue-50" type="password" placeholder="Password">
            <label class="inline-flex mb-4 text-left">
              <input class="mr-2" type="checkbox" name="terms" value="1">
              <span class="-mt-1 inline-block text-sm text-gray-500">By signing up, you agree to our <a class="text-blue-400 hover:underline" href="#">Terms, Data Policy</a> and <a class="text-blue-400 hover:underline" href="#">Cookies Policy</a>.</span>
            </label>
            <button class="w-full inline-block mb-4 py-5 text-sm text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200">Sign In</button>
            <a class="block mb-4 text-center text-sm text-blue-500 hover:text-blue-600" href="#">Forgot password?</a>
            <a class="flex items-center justify-center mb-4 py-5 border-2 border-blue-800 hover:bg-blue-50" href="#">
              <span class="inline-block mr-4">
                <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63483 17.7272V9.766H9.35819L9.76678 6.66243H6.63483V4.68126C6.63483 3.78299 6.8881 3.17083 8.20287 3.17083L9.87701 3.17015V0.394215C9.58749 0.357312 8.59367 0.272705 7.43697 0.272705C5.0216 0.272705 3.36799 1.71878 3.36799 4.37389V6.66243H0.636368V9.766H3.36799V17.7272H6.63483Z" fill="#3C74F9"></path>
                </svg>
              </span>
              <span class="text-sm font-bold uppercase text-blue-800">Sign in with Facebook</span>
            </a>
            <a class="flex items-center justify-center mb-4 py-5 border-2 border-blue-800 hover:bg-blue-50" href="#">
              <span class="inline-block mr-4">
                <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.3181 2.14598C18.6356 2.44844 17.9032 2.65356 17.1337 2.74513C17.9194 2.27462 18.5208 1.52831 18.8059 0.641769C18.0689 1.0775 17.2553 1.39389 16.3885 1.56541C15.6943 0.82489 14.707 0.363647 13.6118 0.363647C11.5108 0.363647 9.80724 2.06719 9.80724 4.16707C9.80724 4.46489 9.84084 4.75577 9.90575 5.03392C6.74436 4.87513 3.94105 3.3605 2.06484 1.05895C1.73687 1.61986 1.5503 2.27344 1.5503 2.9711C1.5503 4.29107 2.22245 5.45574 3.24227 6.13713C2.61878 6.11628 2.03239 5.94477 1.51902 5.65968V5.70719C1.51902 7.5498 2.83087 9.08762 4.57033 9.43762C4.25163 9.52337 3.91557 9.57089 3.5679 9.57089C3.32224 9.57089 3.08466 9.54656 2.85172 9.50019C3.33611 11.0125 4.74069 12.1123 6.40484 12.1424C5.10342 13.1623 3.46245 13.7683 1.68011 13.7683C1.37302 13.7683 1.07054 13.7498 0.77272 13.7162C2.45657 14.7974 4.45563 15.4279 6.60418 15.4279C13.6026 15.4279 17.4281 9.63116 17.4281 4.60398L17.4153 4.11147C18.1628 3.57834 18.8094 2.90853 19.3181 2.14598Z" fill="#3C74F9"></path>
                </svg>
              </span>
              <span class="text-sm font-bold uppercase text-blue-800">Sign in with Twitter</span>
            </a>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from Metis

Tailwind CSS

Metis

Metis Sign In Split-Screen Form with Social Login

A split-screen sign-in page with a left-side form containing email and password fields, a primary Sign In button, and Facebook and Google social login options. The right panel displays a large blue illustration of a person walking a dog beside city buildings, serving as decorative brand imagery.

<section class="relative pb-20">
  <div class="hidden lg:block absolute inset-0 w-1/2 ml-auto bg-blue-600">
    <div class="flex items-center h-full">
      <img class="lg:max-w-lg mx-auto" src="metis-assets/illustrations/walk-dog.png" alt="">
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap">
      <div class="lg:flex lg:flex-col w-full lg:w-1/2 py-6 lg:pr-20">
        <div class="flex justify-between items-center w-full mb-12 lg:mb-20">
          <a class="text-3xl font-semibold leading-none" href="#">
            <img class="h-10" src="metis-assets/logos/metis/metis.svg" alt="" width="auto">
          </a>
          <a class="inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Sign Up</a>
        </div>
        <div class="w-full max-w-lg mx-auto lg:mx-0 my-auto">
          <span class="text-sm text-blueGray-400">Sign In</span>
          <h4 class="mb-6 text-3xl">Join our community</h4>
          <div class="flex mb-4 px-4 bg-blueGray-50 rounded">
            <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="email" placeholder="name@email.com">
            <svg class="h-6 w-6 ml-4 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
            </svg>
          </div>
          <div class="flex mb-6 px-4 bg-blueGray-50 rounded">
            <input class="w-full py-4 text-xs placeholder-blueGray-400 font-semibold leading-none bg-blueGray-50 outline-none" type="password" placeholder="Enter your password">
            <button class="ml-4">
              <svg class="h-6 w-6 my-auto text-blueGray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
              </svg>
            </button>
          </div>
          <button class="block w-full p-4 text-center text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded">Sign In</button>
          <p class="my-6 text-xs text-blueGray-400 text-center">or continue with</p>
          <button class="flex items-center w-full px-4 py-3 mb-2 text-xs text-blueGray-500 font-semibold leading-none border hover:bg-blueGray-50 rounded" href="#">
            <img class="h-6 pr-10" src="metis-assets/logos/facebook-sign.svg">
            <span>Sign In with Facebook</span>
          </button>
          <button class="flex items-center px-4 py-3 w-full text-xs text-blueGray-500 font-semibold leading-none border hover:bg-blueGray-50 rounded" href="#">
            <img class="h-6 pr-10" src="metis-assets/logos/google-sign.svg">
            <span>Sign In with Google</span>
          </button>
        </div>
        <div>
          <p class="mt-8 text-xs text-blueGray-400 text-center lg:text-left"><a class="underline hover:text-blueGray-500" href="#">Police privacy</a> and <a class="underline hover:text-blueGray-500" href="#">Terms of Use</a></p>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Sign in / Sign up from Shuffle UX

Tailwind CSS

Shuffle UX

Split-screen sign-up form with slate hero panel

A split-screen layout with a slate-blue left panel containing a large heading and paragraph, and a light card on the right containing a sign-up form with email, password, repeat password fields, a terms checkbox, and a Get Started button.

<section class="relative py-20">
  <div class="absolute top-0 left-0 lg:bottom-0 h-112 lg:h-auto w-full lg:w-8/12 bg-gray-500"></div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-md">
          <h2 class="mb-6 text-4xl lg:text-5xl font-bold text-white">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="text-gray-50 lg:pr-10 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="lg:max-w-md p-6 bg-gray-50 text-center rounded-lg">
          <form action="#">
            <span class="text-sm text-gray-500 font-semibold uppercase">Sign Up</span>
            <h3 class="mb-8 text-2xl font-bold font-heading">Create new account</h3>
            <input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="email" placeholder="E-mail address">
            <input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="password" placeholder="Password">
            <input class="w-full py-3 pl-3 mb-4 bg-white rounded-lg" type="password" placeholder="Repeat password">
            <label class="inline-block mb-4">
              <input class="mr-1" type="checkbox" name="terms" value="1">
              <span class="text-sm text-gray-500">By signing up, you agree to our <a class="font-bold hover:underline" href="#">Terms, Data Policy</a> and <a class="font-bold hover:underline" href="#">Cookies Policy</a>.</span>
            </label>
            <button class="w-full inline-block px-6 py-3 mr-4 text-sm text-white font-bold leading-loose bg-gray-500 hover:bg-gray-600 rounded transition duration-200">Get Started</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from Cronos

Tailwind CSS

Cronos

Split-Screen Sign-Up Hero with Account Creation Form

A two-column sign-up section with a large bold heading and body copy on the left and a white card on the right containing a 'Create new account' form with email, password fields, a terms checkbox, and a yellow 'Get Started' button. The right card sits over a dark green decorative frame with light accent blocks.

<section class="bg-green-500 relative">
    <div class="absolute hidden lg:block top-0 left-0 bg-white object-cover" style="height: 100%; width: 65%;">
        <img class="absolute hidden lg:block top-0 right-0 h-20" src="cronos-assets/elements/green-light-left.svg" alt="">
        <img class="absolute hidden lg:block bottom-0 right-0 h-20" src="cronos-assets/elements/light-green-left.svg" alt="">
    </div>
    <div class="absolute lg:hidden inset-0 bg-white w-full"></div>
    <div class="container mx-auto px-4 relative">
        <div class="py-16">
            <div class="flex flex-wrap items-center -m-4">
                <div class="w-full lg:w-1/2 p-4">
                    <div class="lg:max-w-md">
                        <h1 class="font-heading text-4xl lg:text-5xl font-bold mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h1>
                        <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 p-4">
                    <div class="max-w-xl mx-auto px-6 lg:px-12 py-12 bg-white">
                        <div class="flex justify-center mb-6">
                            <div class="bg-yellow-100 px-2 py-1 text-xs font-bold">SIGN UP</div>
                        </div>
                        <h2 class="font-heading text-center text-4xl font-bold mb-8">Create new account</h2>
                        <form action="">
                            <input class="px-6 py-3 w-full border border-gray-100 placeholder-gray-300 text-sm focus:ring focus:ring-gray-200 transition duration-200 outline-none mb-6" type="text" placeholder="E-Mail address">
                            <input class="px-6 py-3 w-full border border-gray-100 placeholder-gray-300 text-sm focus:ring focus:ring-gray-200 transition duration-200 outline-none mb-6" type="text" placeholder="Email address">
                            <input class="px-6 py-3 w-full border border-gray-100 placeholder-gray-300 text-sm focus:ring focus:ring-gray-200 transition duration-200 outline-none mb-6" type="password" placeholder="Password">
                            <div class="flex items-center gap-4 mb-6">
                                <div>
                                    <input class="custom-checkbox-1 opacity-0 absolute z-10 h-4 w-4" id="terms" type="checkbox">
                                    <div class="bg-white text-white border border-gray-200 w-4 h-4 flex justify-center items-center rounded-sm">
                                        <svg class="hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 10l3 3l6-6"></path></svg>
                                    </div>
                                </div>
                                <label class="text-gray-600 text-sm" for="terms">By signing up, you agree to our Terms, Data Policy and Cookies Policy.</label>
                            </div>
                            <button class="px-6 py-3 block text-center w-full bg-yellow-500 text-sm font-bold hover:bg-yellow-400 focus:ring focus:ring-yellow-200 transition duration-200" type="submit">Get Started</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Sign in / Sign up from NEUB

Tailwind CSS

NEUB

Split-screen hero with sign-up form and bold pink and yellow blocks

A split-screen hero section with a bold headline and body copy on a pink left panel, paired with a white create-account form on a yellow right panel. The form includes email, password, repeat password fields, a checkbox, and a pink GET STARTED button with a hard black shadow.

<section class="relative py-20 bg-pink-500">
    <div class="absolute right-0 lg:top-0 bottom-0 h-96 lg:h-auto w-full lg:w-4/12 bg-yellow-300 border-t-4 lg:border-t-0 lg:border-l-4 border-black">
    </div>
    <div class="relative container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                <div class="max-w-lg">
                    <div class="mb-8 inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">
                        GET STARTED
                    </div>
                    <h2 class="mb-6 text-4xl leading-tight sm:text-5xl lg:text-6xl font-black font-heading tracking-tight text-white uppercase">Lorem ipsum dolor sit amet <span class="text-yellow-300">consectutar</span> domor at elis</h2>
                    <p class="text-base leading-relaxed lg:text-xl text-white font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                </div>
            </div>
            <div class="w-full lg:w-1/2 px-4">
                <div class="lg:max-w-md relative mr-3 lg:mr-0">
                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-yellow-300 border-4 border-black"></div>
                    <form action="#" class="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_#000000]">
                        <span class="inline-block px-4 py-2 bg-pink-500 text-white font-bold text-xs tracking-wider uppercase">Sign Up</span>
                        <h3 class="mt-5 mb-8 text-3xl font-black font-heading tracking-tight uppercase">Create new account</h3>
                        <input class="w-full py-4 px-4 mb-6 border-4 border-black font-bold text-lg placeholder-gray-600 focus:outline-none focus:border-pink-500 transition-colors" type="email" placeholder="E-mail address">
                        <input class="w-full py-4 px-4 mb-6 border-4 border-black font-bold text-lg placeholder-gray-600 focus:outline-none focus:border-pink-500 transition-colors" type="password" placeholder="Password">
                        <input class="w-full py-4 px-4 mb-6 border-4 border-black font-bold text-lg placeholder-gray-600 focus:outline-none focus:border-pink-500 transition-colors" type="password" placeholder="Repeat password">
                        <label class="inline-flex mb-6">
                            <input class="mr-2 w-5 h-5 border-2 border-black" type="checkbox" name="terms" value="1">
                            <span class="text-sm text-white font-medium">By signing up, you agree to our <a class="font-black font-heading hover:bg-yellow-300 transition-all px-1" href="#">Terms, Data Policy</a> and <a class="font-black font-heading hover:bg-yellow-300 transition-all px-1" href="#">Cookies Policy</a>.</span>
                        </label>
                        <button class="block w-full px-6 py-4 bg-pink-500 hover:bg-yellow-300 text-white hover:text-black font-black font-heading text-xl border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]">GET STARTED</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

Sign in / Sign up from Casper

Tailwind CSS

Casper

Dark Sign-Up Form with Social Login and Illustrated Side Panel

A dark-themed split-screen sign-up section with a heading and supporting text on the left, followed by Facebook and Apple login buttons, an email and password form with a remember-me checkbox, and a purple primary call-to-action. The right side shows a 3D illustrated robot scene in a rounded image container.

<section class="relative py-12 sm:py-24 lg:py-32 bg-body overflow-hidden">
  <img class="absolute top-0 right-0 py-16" src="casper-assets/sign-in/double-lines-circle.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 md:mt-12 mr-4 md:mr-24 lg:mr-52 animate-spinStar z-10" src="casper-assets/sign-in/blink.png" alt="">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap items-end -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <div class="absolute top-0 left-0 w-128 h-128 -mt-52 -ml-32 bg-gradient-to-t from-purple-700 to-darkBlue-900 rounded-full filter blur-4xl"></div>
        <div class="relative max-w-xl">
          <h2 class="font-heading text-5xl sm:text-6xl md:text-7xl font-medium text-white tracking-tight mb-6">Sign up to your account</h2>
          <p class="text-xl text-gray-400 mb-16">Casper is powered by state-of-the-art artificial intelligence and ensuring natural and meaningful interactions</p>
          <div class="max-w-md">
            <form action="">
              <div class="flex mb-6 items-center">
                <a class="inline-flex w-full h-12 mr-3 px-4 items-center justify-center text-sm font-medium text-gray-400 hover:text-gray-300 border border-gray-800 hover:border-gray-700 rounded-full" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.12 5.32H17V2.14C16.0897 2.04535 15.1751 1.99862 14.26 2C11.54 2 9.67999 3.66 9.67999 6.7V9.32H6.60999V12.88H9.67999V22H13.36V12.88H16.42L16.88 9.32H13.36V7.05C13.36 6 13.64 5.32 15.12 5.32Z" fill="white"></path>
                  </svg>
                  <span class="ml-2">Login with Facebook</span>
                </a>
                <a class="inline-flex w-full h-12 px-4 items-center justify-center text-sm font-medium text-gray-400 hover:text-gray-300 border border-gray-800 hover:border-gray-700 rounded-full" href="#">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14.94 5.19C15.3181 4.75428 15.6063 4.24817 15.7882 3.70074C15.9701 3.1533 16.0421 2.57533 16 2C14.8394 2.09369 13.762 2.63956 13 3.52C12.6351 3.94198 12.3586 4.43288 12.1868 4.96364C12.0151 5.49441 11.9516 6.05424 12 6.61C12.5662 6.61472 13.1258 6.4891 13.6356 6.24286C14.1454 5.99662 14.5918 5.63637 14.94 5.19ZM17.46 12.63C17.4667 11.8637 17.6686 11.1118 18.0465 10.4452C18.4244 9.77859 18.966 9.21926 19.62 8.82C19.2073 8.22524 18.6616 7.73483 18.0263 7.38767C17.391 7.04052 16.6835 6.84615 15.96 6.82C14.4 6.66 12.96 7.73 12.13 7.73C11.3 7.73 10.13 6.84 8.83003 6.86C7.98016 6.888 7.15205 7.13578 6.42648 7.57919C5.70091 8.02259 5.10264 8.64648 4.69003 9.39C2.93003 12.45 4.24003 17 6.00003 19.47C6.80003 20.68 7.80003 22.05 9.12003 22C10.44 21.95 10.87 21.18 12.4 21.18C13.93 21.18 14.4 22 15.7 21.97C17 21.94 17.92 20.73 18.76 19.52C19.3551 18.6415 19.8199 17.6816 20.14 16.67C19.3475 16.332 18.6714 15.7693 18.1951 15.0513C17.7188 14.3333 17.4633 13.4916 17.46 12.63Z" fill="white"></path>
                  </svg>
                  <span class="ml-2">Login with Apple</span>
                </a>
              </div>
              <div class="flex mb-6 items-center">
                <div class="h-px w-full">
                  <div class="h-1/2 bg-gray-800"></div>
                </div>
                <span class="inline-block mx-4 text-sm text-gray-300">Or</span>
                <div class="h-px w-full">
                  <div class="h-1/2 bg-gray-800"></div>
                </div>
              </div>
              <div>
                <span class="block mb-2 text-sm font-medium text-white leading-snug">Email</span>
                <input class="block w-full py-2 px-3 h-11 mb-6 bg-gray-800 border border-gray-700 rounded-lg text-sm placeholder-gray-500 text-white border-none outline-none" type="email" placeholder="casper@shuffle.dev">
                <span class="block mb-2 text-sm font-medium text-white leading-snug">Password</span>
                <div class="flex py-2 px-3 h-11 mb-5 bg-gray-800 border border-gray-700 rounded-lg">
                  <input class="w-full bg-transparent text-sm placeholder-gray-500 text-white border-none outline-none" type="email" placeholder="Enter your password">
                  <button class="text-gray-600 hover:text-gray-200">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M21.9199 11.6C19.8999 6.91 16.0999 4 11.9999 4C7.89994 4 4.09994 6.91 2.07994 11.6C2.02488 11.7262 1.99646 11.8623 1.99646 12C1.99646 12.1377 2.02488 12.2738 2.07994 12.4C4.09994 17.09 7.89994 20 11.9999 20C16.0999 20 19.8999 17.09 21.9199 12.4C21.975 12.2738 22.0034 12.1377 22.0034 12C22.0034 11.8623 21.975 11.7262 21.9199 11.6ZM11.9999 18C8.81994 18 5.82994 15.71 4.09994 12C5.82994 8.29 8.81994 6 11.9999 6C15.1799 6 18.1699 8.29 19.8999 12C18.1699 15.71 15.1799 18 11.9999 18ZM11.9999 8C11.2088 8 10.4355 8.2346 9.77766 8.67412C9.11987 9.11365 8.60718 9.73836 8.30443 10.4693C8.00168 11.2002 7.92246 12.0044 8.0768 12.7804C8.23114 13.5563 8.61211 14.269 9.17152 14.8284C9.73093 15.3878 10.4437 15.7688 11.2196 15.9231C11.9955 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8863 14.8801 15.3258 14.2223C15.7653 13.5645 15.9999 12.7911 15.9999 12C15.9999 10.9391 15.5785 9.92172 14.8284 9.17157C14.0782 8.42143 13.0608 8 11.9999 8ZM11.9999 14C11.6044 14 11.2177 13.8827 10.8888 13.6629C10.5599 13.4432 10.3036 13.1308 10.1522 12.7654C10.0008 12.3999 9.9612 11.9978 10.0384 11.6098C10.1155 11.2219 10.306 10.8655 10.5857 10.5858C10.8654 10.3061 11.2218 10.1156 11.6098 10.0384C11.9977 9.96126 12.3999 10.0009 12.7653 10.1522C13.1308 10.3036 13.4431 10.56 13.6629 10.8889C13.8826 11.2178 13.9999 11.6044 13.9999 12C13.9999 12.5304 13.7892 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 11.9999 14Z" fill="currentColor"></path>
                    </svg>
                  </button>
                </div>
                <span class="block mb-2 text-sm font-medium text-white leading-snug">Repeat password</span>
                <div class="flex py-2 px-3 h-11 mb-5 bg-gray-800 border border-gray-700 rounded-lg">
                  <input class="w-full bg-transparent text-sm placeholder-gray-500 text-white border-none outline-none" type="email" placeholder="Repeat password">
                  <button class="text-gray-600 hover:text-gray-200">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M21.9199 11.6C19.8999 6.91 16.0999 4 11.9999 4C7.89994 4 4.09994 6.91 2.07994 11.6C2.02488 11.7262 1.99646 11.8623 1.99646 12C1.99646 12.1377 2.02488 12.2738 2.07994 12.4C4.09994 17.09 7.89994 20 11.9999 20C16.0999 20 19.8999 17.09 21.9199 12.4C21.975 12.2738 22.0034 12.1377 22.0034 12C22.0034 11.8623 21.975 11.7262 21.9199 11.6ZM11.9999 18C8.81994 18 5.82994 15.71 4.09994 12C5.82994 8.29 8.81994 6 11.9999 6C15.1799 6 18.1699 8.29 19.8999 12C18.1699 15.71 15.1799 18 11.9999 18ZM11.9999 8C11.2088 8 10.4355 8.2346 9.77766 8.67412C9.11987 9.11365 8.60718 9.73836 8.30443 10.4693C8.00168 11.2002 7.92246 12.0044 8.0768 12.7804C8.23114 13.5563 8.61211 14.269 9.17152 14.8284C9.73093 15.3878 10.4437 15.7688 11.2196 15.9231C11.9955 16.0775 12.7998 15.9983 13.5307 15.6955C14.2616 15.3928 14.8863 14.8801 15.3258 14.2223C15.7653 13.5645 15.9999 12.7911 15.9999 12C15.9999 10.9391 15.5785 9.92172 14.8284 9.17157C14.0782 8.42143 13.0608 8 11.9999 8ZM11.9999 14C11.6044 14 11.2177 13.8827 10.8888 13.6629C10.5599 13.4432 10.3036 13.1308 10.1522 12.7654C10.0008 12.3999 9.9612 11.9978 10.0384 11.6098C10.1155 11.2219 10.306 10.8655 10.5857 10.5858C10.8654 10.3061 11.2218 10.1156 11.6098 10.0384C11.9977 9.96126 12.3999 10.0009 12.7653 10.1522C13.1308 10.3036 13.4431 10.56 13.6629 10.8889C13.8826 11.2178 13.9999 11.6044 13.9999 12C13.9999 12.5304 13.7892 13.0391 13.4142 13.4142C13.0391 13.7893 12.5304 14 11.9999 14Z" fill="currentColor"></path>
                    </svg>
                  </button>
                </div>
                <div class="mb-4">
                  <label class="custom-checkbox flex items-center relative h-8 cursor-pointer">
                    <span class="inline-block ml-6 text-sm text-gray-400">Remember for 30 days</span>
                    <input class="absolute top-0 left-0 transform translate-y-1/2 w-4 h-4 opacity-0" type="checkbox" checked="">
                    <span class="custom-check absolute top-0 left-0 transform translate-y-1/2 flex h-4 w-4 items-center justify-center bg-violet-400 border border-violet-700 rounded">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12.4733 4.80667C12.4114 4.74418 12.3376 4.69458 12.2564 4.66074C12.1752 4.62689 12.088 4.60947 12 4.60947C11.912 4.60947 11.8249 4.62689 11.7436 4.66074C11.6624 4.69458 11.5886 4.74418 11.5267 4.80667L6.56001 9.78L4.47334 7.68667C4.40899 7.62451 4.33303 7.57563 4.2498 7.54283C4.16656 7.51003 4.07768 7.49394 3.98822 7.49549C3.89877 7.49703 3.8105 7.51619 3.72844 7.55185C3.64639 7.58751 3.57217 7.63898 3.51001 7.70333C3.44785 7.76768 3.39897 7.84364 3.36617 7.92688C3.33337 8.01011 3.31728 8.099 3.31883 8.18845C3.32038 8.2779 3.33953 8.36618 3.37519 8.44823C3.41085 8.53028 3.46233 8.60451 3.52667 8.66667L6.08667 11.2267C6.14865 11.2892 6.22238 11.3387 6.30362 11.3726C6.38486 11.4064 6.472 11.4239 6.56001 11.4239C6.64802 11.4239 6.73515 11.4064 6.81639 11.3726C6.89763 11.3387 6.97137 11.2892 7.03334 11.2267L12.4733 5.78667C12.541 5.72424 12.595 5.64847 12.632 5.56414C12.6689 5.4798 12.688 5.38873 12.688 5.29667C12.688 5.2046 12.6689 5.11353 12.632 5.02919C12.595 4.94486 12.541 4.86909 12.4733 4.80667Z" fill="currentColor"></path>
                      </svg>
                    </span>
                  </label>
                </div>
                <div>
                  <button class="flex w-full h-14 py-2 px-4 mb-5 items-center justify-center text-base font-medium uppercase text-black hover:text-white bg-violet-500 hover:bg-violet-600 transition duration-200 rounded-full" type="submit">
                    <span class="mr-2">LOGIN NOW</span>
                    <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M18.4199 6.62C18.3185 6.37565 18.1243 6.18147 17.8799 6.08C17.7597 6.02876 17.6306 6.00158 17.4999 6H7.49994C7.23472 6 6.98037 6.10536 6.79283 6.29289C6.6053 6.48043 6.49994 6.73478 6.49994 7C6.49994 7.26522 6.6053 7.51957 6.79283 7.70711C6.98037 7.89464 7.23472 8 7.49994 8H15.0899L6.78994 16.29C6.69621 16.383 6.62182 16.4936 6.57105 16.6154C6.52028 16.7373 6.49414 16.868 6.49414 17C6.49414 17.132 6.52028 17.2627 6.57105 17.3846C6.62182 17.5064 6.69621 17.617 6.78994 17.71C6.8829 17.8037 6.9935 17.8781 7.11536 17.9289C7.23722 17.9797 7.36793 18.0058 7.49994 18.0058C7.63195 18.0058 7.76266 17.9797 7.88452 17.9289C8.00638 17.8781 8.11698 17.8037 8.20994 17.71L16.4999 9.41V17C16.4999 17.2652 16.6053 17.5196 16.7928 17.7071C16.9804 17.8946 17.2347 18 17.4999 18C17.7652 18 18.0195 17.8946 18.207 17.7071C18.3946 17.5196 18.4999 17.2652 18.4999 17V7C18.4984 6.86932 18.4712 6.74022 18.4199 6.62Z" fill="currentColor"></path>
                    </svg>
                  </button>
                  <p class="text-sm font-medium text-white">
                    <span>Already have an account?</span>
                    <a class="inline-block text-sky-900 hover:text-sky-600" href="#">Sign in</a>
                  </p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block w-full" src="casper-assets/sign-in/photo1.png" alt="">
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from Mirga

Tailwind CSS

Mirga

Split-screen account registration form with Google sign-in and orange promotional panel

A split-screen sign-up section with a left-side registration form offering Google sign-in, a name/email field, and a Register now button, paired with a right-side orange gradient panel showing a Mirga promotional card. The layout is designed to introduce the product while collecting account information.

<section class="bg-neutral-50 py-12 md:py-24">
  <div class="container mx-auto px-4">
    <div class="bg-white rounded-3xl">
      <div class="flex flex-wrap">
        <div class="w-full xl:w-1/2">
          <div class="px-8 md:px-16 pt-16 pb-20">
            <form action="#">
              <span class="inline-block text-neutral-600 text-xl font-semibold tracking-tight mb-4">Account</span>
              <h5 class="text-6xl font-semibold mb-6 font-heading">Try a demo for free</h5>
              <p class="text-neutral-600 font-medium tracking-tight mb-16">At the heart of our success is a diverse and talented team.</p>
              <a class="flex justify-center items-center text-center w-full mb-6 p-4 font-semibold tracking-tight hover:text-white border border-neutral-900 bg-white hover:bg-neutral-900 focus:bg-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">
                <img class="mr-6 h-8" src="mirga-assets/images/sign-in/google.svg" alt="">
                <span>Continue with Google</span>
              </a>
              <p class="text-center text-neutral-600 font-medium tracking-tight mb-4">OR</p>
              <label class="block mb-3 text-neutral-600 font-medium tracking-tight" for="name">Your Name</label>
              <div class="flex flex-wrap -m-3 mb-3">
                <div class="w-full p-3">
                  <input class="w-full px-8 py-5 outline-none rounded-lg border border-neutral-100 placeholder-neutral-300 font-medium focus:ring-4 focus:ring-neutral-100 transition duration-200" id="name" type="text" placeholder="ex. d.duncan@email.com">
                </div>
                <div class="w-full p-3">
                  <button class="flex justify-center items-center text-center h-full w-full p-5 font-semibold tracking-tight text-lg text-white bg-neutral-900 hover:bg-neutral-800 focus:bg-neutral-800 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" type="submit">Register now</button>
                </div>
              </div>
              <a class="inline-block text-neutral-600 text-sm font-medium hover:text-neutral-800 tracking-tight transition duration-200" href="#">Already have an account? Log in</a>
            </form>
          </div>
        </div>
        <div class="w-full xl:w-1/2">
          <div class="bg-orange-500 rounded-3xl relative h-full">
            <img class="w-full h-full mix-blend-screen rounded-3xl" src="mirga-assets/images/sign-in/gradient.png" alt="">
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-xs md:max-w-md">
              <div class="bg-white rounded-5xl px-4 md:px-10 pt-6 md:pt-12 pb-8 md:pb-16">
                <img class="mb-4" src="mirga-assets/images/logos/mirga-dark-logo.svg" alt="">
                <p class="text-neutral-400 font-medium tracking-tight mb-10">Shape Tomorrow with Digital Learning Today!</p>
                <img class="mx-auto" src="mirga-assets/images/sign-in/picture1.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from Flow

Tailwind CSS

Flow

Split-screen account creation form with green energy imagery

A registration form titled 'Create your account' with Full Name, Email, and Password fields, a primary Create account button, and a Continue with Google option. The right side shows decorative shapes with photos of a man charging an EV and a wind turbine, separated into a split-screen layout.

<section class="relative overflow-hidden">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-1/2 xl:w-2/3 pt-12 px-5 xl:px-20 pb-24">
                <div class="flex mb-20 lg:mb-32 items-center justify-between">
                    <span>
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V36C40 38.2091 38.2091 40 36 40H4C1.79086 40 0 38.2091 0 36V4Z" fill="#BEF264"></path>
                            <rect x="19.1665" y="6.6665" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="19.1665" y="23.3335" width="1.66667" height="10" rx="0.833333" fill="#022C22"></rect>
                            <rect x="28.8391" y="9.98291" width="1.66667" height="10" rx="0.833333" transform="rotate(45 28.8391 9.98291)" fill="#022C22"></rect>
                            <rect x="17.0537" y="21.7678" width="1.66667" height="10" rx="0.833333" transform="rotate(45 17.0537 21.7678)" fill="#022C22"></rect>
                            <rect x="23.3335" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 23.3335 20.8333)" fill="#022C22"></rect>
                            <rect x="6.6665" y="20.8333" width="1.66667" height="10" rx="0.833333" transform="rotate(-90 6.6665 20.8333)" fill="#022C22"></rect>
                            <rect x="21.7678" y="22.9463" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 21.7678 22.9463)" fill="#022C22"></rect>
                            <rect x="9.98267" y="11.1611" width="1.66667" height="10" rx="0.833333" transform="rotate(-45 9.98267 11.1611)" fill="#022C22"></rect>
                        </svg>                    
                    </span>
                    <p>
                        <span>Already have an account?</span>
                        <a href="#" class="inline-block font-medium underline hover:text-lime-600">Login</a>
                    </p>
                </div>
                <div class="max-w-sm mx-auto">
                    <form action="">
                        <h3 class="text-4xl font-medium mb-10">Create your account</h3>
                        <label for="" class="block pl-4 mb-1 text-sm font-medium">Full Name</label>
                        <input type="text" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                        <label for="" class="block pl-4 mb-1 text-sm font-medium">Email</label>
                        <input type="email" class="w-full px-4 py-3 mb-6 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                        <label for="" class="block pl-4 mb-1 text-sm font-medium">Password</label>
                        <div class="relative mb-6" x-data="{ visible: false }">
                            <input type="password" :type="visible ? 'text': 'password'" class="relative w-full px-4 py-3 outline-none ring-offset-0 focus:ring-2 focus:ring-lime-500 shadow rounded-full">
                            <a href="#" x-on:click.prevent="visible = !visible" class="absolute top-1/2 right-0 transform -translate-y-1/2 mr-4">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1.75 10C1.75 10 4.75 4 10 4C15.25 4 18.25 10 18.25 10C18.25 10 15.25 16 10 16C4.75 16 1.75 10 1.75 10Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    <path d="M10 12.25C11.2426 12.25 12.25 11.2426 12.25 10C12.25 8.75736 11.2426 7.75 10 7.75C8.75736 7.75 7.75 8.75736 7.75 10C7.75 11.2426 8.75736 12.25 10 12.25Z" stroke="#646A69" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </a>
                        </div>
                        <a href="#" class="inline-flex w-full py-3 px-6 items-center justify-center text-lg font-medium text-white hover:text-teal-900 border border-teal-900 hover:border-lime-500 bg-teal-900 hover:bg-lime-500 rounded-full transition duration-200">Create account</a>
                        <span class="block text-center py-4 mx-auto text-gray-700">or</span>
                        <a href="#" class="inline-flex w-full py-3 px-6 items-center justify-center text-lg font-medium text-black hover:text-white border border-teal-900 hover:bg-black rounded-full transition duration-200">
                            <img class="h-4" src="flow-assets/sign-in/google-icon.svg" alt="">
                            <span class="ml-4">Continue with Google</span>
                        </a>
                    </form>
                </div>
            </div>
            <div class="w-full lg:w-1/2 xl:w-1/3">
                <img class="block w-full max-w-lg xl:max-w-2xl ml-auto h-full" src="flow-assets/sign-in/image-circle-photos.png" alt="">
            </div>
        </div>
    </section>

Sign in / Sign up from Vista

Tailwind CSS

Vista

Split-Screen Login Form with App Preview

A dark split-screen authentication component with a login form on the left (email, password, Log in button, and Google sign-in) and a pink gradient panel on the right showing an illustrative dashboard screenshot with a user-count badge. The form is the outer component; the dashboard is an illustrative preview.

<section class="bg-darkPink-900 pr-6 pl-6 lg:pl-28 py-6">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <div class="flex flex-col justify-center h-full max-w-md mx-auto">
                <h1 class="font-heading text-white text-4xl font-bold mb-4">Login</h1>
                <p class="text-gray-400 mb-8">
                    <span>Don’t have an account?</span>
                    <a href="#" class="text-white font-bold hover:text-opacity-70 transition duration-200">Sign up</a>
                </p>
                <form action="">
                    <label for="email" class="block text-sm mb-2 text-white font-medium">Email</label>
                    <input type="email" id="email" class="px-4 py-3 mb-6 rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 text-sm placeholder-white placeholder-opacity-50 text-white focus:border-white focus:border focus:border-opacity-50 transition duration-200 outline-none w-full" placeholder="john@email.com">
                    <label for="password" class="block text-sm mb-2 text-white font-medium">Password</label>
                    <div class="rounded-full border border-white border-opacity-10 bg-white bg-opacity-5 px-4 py-3 flex items-center mb-8" x-data="{ visible: false }">
                        <input type="password" :type="visible ? 'text' : 'password'" id="password" class="flex-1 bg-transparent text-sm placeholder-white placeholder-opacity-50 text-white transition duration-200 outline-none" placeholder="Enter password">
                        <svg x-on:click="visible = !visible" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                            <g opacity="0.5">
                              <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="white" stroke="white" style="fill:white;fill-opacity:1;stroke:white;stroke-opacity:1;"></path>
                              <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                            </g>
                        </svg>
                    </div>
                    <button type="submit" class="group relative inline-block w-full mb-6 p-0.5 font-semibold overflow-hidden rounded-full shadow-pink hover:shadow-none focus:shadow-none">
                        <div class="absolute inset-0 bg-gradient-to-b from-pink-400 to-pink-500 rounded-full"></div>
                        <div class="relative z-50 flex justify-center items-center py-2 px-4 bg-pink-500 group-hover:bg-pink-600 group-focus:bg-pink-600 rounded-full transition duration-200">
                            <p class="text-white text-center">Log in</p>
                        </div>
                    </button>
                    <a href="#" class="group relative inline-block w-full p-0.5 font-semibold overflow-hidden rounded-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 flex justify-center items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                            <img class="mr-3 h-5" src="vista-assets/images/logos/google-logo.svg" alt="">
                            <p class="font-semibold">Log in with Google</p>
                        </div>
                    </a>
                </form>
            </div>
        </div>
        <div class="w-full lg:w-1/2 p-4">
            <img class="ml-auto object-cover rounded-2xl" style="height:850px" src="vista-assets/images/sign-up/picture-pink1.png" alt="">
        </div>
    </div>
</section>

Sign in / Sign up from Cyber

Tailwind CSS

Cyber

Cyberpunk Split-Screen Sign-In Hero with Neon Headline

A dark, split-screen authentication section with a large neon headline and descriptive text on the left and a 'Neural Link' sign-in card on the right. The card includes email and password fields, a terms checkbox with links, and a gradient 'Execute Connection' button.

<section class="relative py-20 scan-lines">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute top-0 left-0 lg:bottom-0 h-96 lg:h-auto w-full lg:w-8/12 bg-gradient-to-br from-blue-400 via-purple-500 to-blue-400 opacity-20"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="relative container px-4 mx-auto z-10">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg relative">
          <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1"></div>
          <h2 class="relative mb-6 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider animate-glitch bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">SYSTEM ACCESS PROTOCOL INITIALIZED </h2>
          <p class="text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Interface with quantum encryption matrices. Execute biometric validation sequences. Breach conventional security limitations through neural-net authentication protocols.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="lg:max-w-md p-6 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-center rounded-lg border border-blue-400 border-opacity-30 hologram-effect animate-float relative">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10 rounded-lg"></div>
          <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
          <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
          
          <form action="#" class="relative z-10">
            <span class="text-sm text-blue-400 font-semibold uppercase tracking-wider">NEURAL LINK</span>
            <h3 class="mb-6 text-2xl font-black font-heading tracking-wider bg-gradient-to-r from-green-400 to-blue-400 bg-clip-text text-transparent">SIGN IN</h3>
            
            <input class="w-full py-3 pl-3 mb-4 bg-gray-950 border-2 border-blue-400 border-opacity-30 rounded-lg text-blue-400 placeholder-gray-500 focus:border-blue-400 focus:outline-none transition-all duration-300" type="email" placeholder="ID@SYSTEM.NET">
            <input class="w-full py-3 pl-3 mb-4 bg-gray-950 border-2 border-purple-500 border-opacity-30 rounded-lg text-purple-500 placeholder-gray-500 focus:border-purple-500 focus:outline-none transition-all duration-300" type="password" placeholder="PASSWORD">
            
            <label class="inline-block mb-4 text-left">
              <input class="mr-2 accent-blue-400" type="checkbox" name="terms" value="1">
              <span class="text-sm text-gray-400">By connecting, you agree to our <a class="font-bold hover:underline text-blue-400 hover:text-purple-500 transition-colors duration-300" href="#">Cyber Protocol Terms</a> and <a class="font-bold hover:underline text-green-400 hover:text-blue-400 transition-colors duration-300" href="#">Data Matrix Policy</a>.</span>
            </label>
            
            <button class="group relative block w-full px-5 py-3 text-sm bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-green-400 text-gray-950 font-semibold tracking-wider transition-all duration-300 transform hover:scale-105 hover:animate-pulse-neon overflow-hidden" style="clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 100%, 15px 100%);">
              <span class="relative z-10">EXECUTE CONNECTION</span>
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from FilyTreck

Tailwind CSS

FilyTreck

Split-screen registration form with photo panel and social sign-in

A split-screen account registration page with a full-height photo and tagline on the left and a form on the right containing email and password fields, a primary submit button, Google and Apple sign-in options, and a login link. The layout is designed for account creation rather than app promotion.

<section class="relative">
    <img class="absolute top-0 left-0 w-full h-36 md:w-1/2 md:h-full object-cover" src="fily-assets/sign-up/pic.jpg" alt="">
    <div class="relative container mx-auto px-4">
        <div class="flex flex-wrap">
            <div class="w-full md:w-1/2">
                <div class="pt-16 pb-14 h-full">
                    <div class="flex flex-col items-start justify-between h-full">
                        <img class="mb-16 h-9" src="fily-assets/logos/fily-treck-white-logo.svg" alt="">
                        <h3 class="font-heading text-3xl text-black md:text-white font-bold">Imagination is more important than knowledge because knowledge is limited.</h3>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2">
                <div class="pt-16 md:pt-32 pb-36 md:px-10 h-full">
                    <form action="#" class="max-w-lg mx-auto">
                        <h2 class="mb-12 font-heading text-4xl font-medium">Register an account</h2>
                        <div class="flex flex-wrap -m-3 mb-7">
                            <div class="w-full p-3">
                                <label for="signup-input-01-1" class="mb-2 inline-block text-sm font-medium">Email</label>
                                <input id="signup-input-01-1" type="text" placeholder="Enter your email" class="w-full px-6 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                            </div>
                            <div class="w-full p-3">
                                <div class="relative">
                                    <label for="signup-input-01-2" class="mb-2 inline-block text-sm font-medium">Password</label>
                                    <div class="relative" x-data="{ visible: false }">
                                        <input id="signup-input-01-2" :type="visible ? 'text': 'password'" type="password" placeholder="Your password" class="w-full px-6 pr-12 h-14 bg-transparent font-semibold text-black placeholder-gray-500 outline-none border border-gray-100 focus:ring-4 focus:ring-blue-200 rounded-full transition duration-200">
                                        <div x-on:click="visible = !visible" class="absolute right-6 top-1/2 transform -translate-y-1/2">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                                <g clip-path="url(#clip0_447_91)">
                                                    <path d="M17.4527 7.06424C16.2894 5.16974 13.6434 1.99124 8.99943 1.99124C4.35543 1.99124 1.70943 5.16974 0.546178 7.06424C0.186574 7.64587 -0.00390625 8.31617 -0.00390625 8.99999C-0.00390625 9.68381 0.186574 10.3541 0.546178 10.9357C1.70943 12.8302 4.35543 16.0087 8.99943 16.0087C13.6434 16.0087 16.2894 12.8302 17.4527 10.9357C17.8123 10.3541 18.0028 9.68381 18.0028 8.99999C18.0028 8.31617 17.8123 7.64587 17.4527 7.06424ZM16.1739 10.1505C15.1749 11.775 12.9137 14.5087 8.99943 14.5087C5.08518 14.5087 2.82393 11.775 1.82493 10.1505C1.61128 9.80478 1.49812 9.4064 1.49812 8.99999C1.49812 8.59359 1.61128 8.19521 1.82493 7.84949C2.82393 6.22499 5.08518 3.49124 8.99943 3.49124C12.9137 3.49124 15.1749 6.22199 16.1739 7.84949C16.3876 8.19521 16.5007 8.59359 16.5007 8.99999C16.5007 9.4064 16.3876 9.80478 16.1739 10.1505Z" fill="#696D81"></path>
                                                    <path d="M9 5.25C8.25832 5.25 7.5333 5.46993 6.91661 5.88199C6.29993 6.29404 5.81928 6.87971 5.53545 7.56494C5.25162 8.25016 5.17736 9.00416 5.32206 9.73159C5.46675 10.459 5.8239 11.1272 6.34835 11.6517C6.8728 12.1761 7.54098 12.5333 8.26841 12.6779C8.99584 12.8226 9.74984 12.7484 10.4351 12.4645C11.1203 12.1807 11.706 11.7001 12.118 11.0834C12.5301 10.4667 12.75 9.74168 12.75 9C12.7488 8.0058 12.3533 7.05267 11.6503 6.34966C10.9473 5.64666 9.9942 5.25119 9 5.25ZM9 11.25C8.55499 11.25 8.11998 11.118 7.74997 10.8708C7.37996 10.6236 7.09157 10.2722 6.92127 9.86104C6.75098 9.4499 6.70642 8.9975 6.79323 8.56105C6.88005 8.12459 7.09434 7.72368 7.40901 7.40901C7.72368 7.09434 8.12459 6.88005 8.56105 6.79323C8.99751 6.70642 9.44991 6.75097 9.86104 6.92127C10.2722 7.09157 10.6236 7.37996 10.8708 7.74997C11.118 8.11998 11.25 8.55499 11.25 9C11.25 9.59674 11.0129 10.169 10.591 10.591C10.169 11.0129 9.59674 11.25 9 11.25Z" fill="#696D81"></path>
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_447_91">
                                                        <rect width="18" height="18" fill="white"></rect>
                                                    </clipPath>
                                                </defs>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="inline-flex justify-center items-center text-center w-full mb-12 h-14 py-6 px-10 font-semibold text-white hover:text-white focus:text-white bg-blue-500 hover:bg-blue-600 focus:bg-blue-600 rounded-full focus:ring-4 focus:ring-blue-200 transition duration-200">Send message</button>
                        <div class="flex flex-wrap items-center gap-4 mb-12">
                            <div class="flex-1">
                                <div class="h-px bg-gray-100"></div>
                            </div>
                            <div class="w-auto">
                                <span class="text-gray-500 font-semibold">or</span>
                            </div>
                            <div class="flex-1">
                                <div class="h-px bg-gray-100"></div>
                            </div>
                        </div>
                        <a href="#" class="inline-flex justify-center items-center text-center w-full mb-4 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <img class="mr-3" src="fily-assets/sign-up/google-play.svg" alt="">
                            <span>Continue with Google</span>
                        </a>
                        <a href="#" class="inline-flex justify-center items-center text-center w-full mb-11 h-14 py-6 px-10 font-semibold text-black hover:text-black focus:text-black bg-white hover:bg-gray-50 focus:bg-gray-50 border border-gray-100 rounded-full focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <img class="mr-3" src="fily-assets/sign-up/apple.svg" alt="">
                            <span>Continue with Apple</span>
                        </a>
                        <div class="flex justify-center">
                            <span class="font-medium">Already have an account? <a href="#" class="font-semibold text-blue-500 hover:text-blue-600">Log in</a></span>
                        </div>
                    </form> 
                </div>
            </div>
        </div>
    </div>
</section>

Sign in / Sign up from Aurora

Tailwind CSS

Aurora

Split-Screen Login Form with Testimonial Panel

A dark-themed split-screen authentication page with a left-side login form offering Google sign-in, email and password fields, and a green Login button. The right panel shows a customer testimonial with attribution and a logo.

<section>
  <div class="flex flex-wrap">
    <div class="w-full lg:w-1/2 px-5 bg-gray-900">
      <div class="pt-8 pb-12 lg:pb-32 md:px-8">
        <div class="flex items-center justify-end mb-20">
          <span class="mr-2 text-sm text-white">Don’t have an account?</span>
          <a class="group flex justify-center h-11 p-1 text-center text-sm text-white font-semibold rounded-lg" href="#">
            <div class="inline-flex items-stretch w-full h-full p-0.5 rounded-lg bg-gradient-to-b from-gray-500 via-gray-700 to-gray-700 hover:to-gray-800">
              <div class="flex w-full items-center justify-center px-4 bg-gray-700 group-hover:bg-opacity-40 rounded-md transition duration-300">
                <span>Sign up</span>
              </div>
            </div>
          </a>
        </div>
        <div class="max-w-sm mx-auto">
          <h3 class="font-heading tracking-tight text-4xl font-bold text-white mb-4">Login</h3>
          <p class="text-gray-400 mb-8">Welcome back! Please enter your details.</p>
          <form action="">
            <a class="inline-flex w-full h-12 py-2 px-5 items-center justify-center text-base font-bold text-gray-700 hover:text-yellowGreen-700 bg-white rounded-lg transition duration-200" href="#">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 1.91663C12.0354 1.91663 13.89 2.67488 15.3114 3.91834L13.3034 5.92639C12.4018 5.19322 11.2539 4.74996 10 4.74996C7.10068 4.74996 4.75 7.10064 4.75 9.99996C4.75 12.8993 7.10068 15.25 10 15.25C12.286 15.25 14.2241 13.7867 14.9452 11.7501L15.0633 11.4166H14.7096H10.25V8.58329H17.25V8.61788H17.5H17.9634C18.0412 9.06748 18.0833 9.52903 18.0833 9.99996C18.0833 14.464 14.464 18.0833 10 18.0833C5.53599 18.0833 1.91667 14.464 1.91667 9.99996C1.91667 5.53595 5.53599 1.91663 10 1.91663Z" fill="#FFC107" stroke="#3B5444" stroke-width="0.5"></path>
                <path d="M2.6275 6.12121L5.36542 8.12913C6.10625 6.29496 7.90042 4.99996 10 4.99996C11.2746 4.99996 12.4342 5.48079 13.3171 6.26621L15.6742 3.90913C14.1858 2.52204 12.195 1.66663 10 1.66663C6.79917 1.66663 4.02333 3.47371 2.6275 6.12121Z" fill="#FF3D00"></path>
                <path d="M10 18.3334C12.1525 18.3334 14.1083 17.5096 15.5871 16.17L13.0079 13.9875C12.1431 14.6452 11.0864 15.0009 10 15C7.8325 15 5.99208 13.618 5.29875 11.6892L2.58125 13.783C3.96042 16.4817 6.76125 18.3334 10 18.3334Z" fill="#4CAF50"></path>
                <path d="M18.1713 8.36796H17.5V8.33337H10V11.6667H14.7096C14.3809 12.5902 13.7889 13.3972 13.0067 13.988L13.0079 13.9871L15.5871 16.1696C15.4046 16.3355 18.3333 14.1667 18.3333 10C18.3333 9.44129 18.2758 8.89587 18.1713 8.36796Z" fill="#1976D2"></path>
              </svg>
              <span class="ml-2">Login with Google</span>
            </a>
            <div class="my-8 flex items-center">
              <div class="h-px w-full bg-gray-700"></div>
              <span class="inline-block mx-4 text-xs font-medium text-gray-500">OR</span>
              <div class="h-px w-full bg-gray-700"></div>
            </div>
            <div class="mb-8">
              <label class="block mb-2 text-sm font-medium text-white" for="">Email</label>
              <input class="py-2 px-4 h-11 w-full text-gray-500 placeholder-gray-500 bg-gray-800 border border-gray-700 focus:border-teal-800 shadow-sm outline-none ring ring-transparent focus:ring-teal-800 rounded-lg" type="email" placeholder="Enter your email address">
            </div>
            <div class="mb-2">
              <label class="block mb-2 text-sm font-medium text-white" for="">Password</label>
              <input class="py-2 px-4 h-11 w-full text-gray-500 placeholder-gray-500 bg-gray-800 border border-gray-700 focus:border-teal-800 shadow-sm outline-none ring ring-transparent focus:ring-teal-800 rounded-lg" type="password" placeholder="Enter your password">
            </div>
            <div class="text-right mb-8"><a class="inline-block text-sm font-semibold text-yellowGreen-600 hover:text-yellowGreen-500" href="#">Forgot Password?</a></div>
            <button class="xs:flex-shrink-0 group relative w-full h-12 flex items-center justify-center px-4 p-px font-bold text-gray-900 bg-yellowGreen-600 rounded-lg transition-all duration-300 focus:outline-none" type="submit">
              <div class="absolute top-0 left-0 w-full h-full rounded-lg ring ring-yellowGreen-900 animate-pulse group-hover:ring-0 transition duration-300"></div>
              <span>Login</span>
            </button>
          </form>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/2 px-5 bg-gray-800">
      <div class="flex h-full py-12 items-center justify-center">
        <div class="max-w-md sm:max-w-lg px-2">
          <div class="py-12 xs:px-10 border-t-2 border-b-2 border-gray-700">
            <span class="block mb-5">
              <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.072 0.351998L6.192 11.2H0.528L4.848 0.351998H9.072ZM17.568 0.351998L14.736 11.2H9.072L13.392 0.351998H17.568Z" fill="white"></path>
              </svg>
            </span>
            <p class="text-2xl font-medium text-white mb-10">I've tried numerous assets manager platforms, but this one truly stands out!</p>
            <div class="flex items-center justify-between">
              <div>
                <span class="block mb-1 text-sm font-semibold text-white">Cooper Levin</span>
                <span class="block text-xs text-gray-400">Founder of AIME Inc.</span>
              </div>
              <img src="aurora-assets/logos/logo-aurora-white.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from asitrastudio

Tailwind CSS

asitrastudio

Sign-up Modal with Social Login and Email Form

A centered modal dialog titled "Sign up to studio" with Google and Apple social sign-up buttons, an OR divider, and fields for full name, email, and password, followed by a disabled-looking Sign up button and terms text. A close icon sits in the top-right corner.

<section>
  <div class="z-50 fixed top-0 left-0 h-full w-full">
    <div class="flex h-full w-full py-20 px-5 items-center justify-center overflow-scroll">
      <div class="relative py-12 md:py-10 px-8 md:px-16 w-full max-w-xl mx-auto text-center bg-white border rounded-4xl">
        <button class="absolute top-0 right-0 mt-6 mr-8">
          <span class="inline-block">
            <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.5 6.45616L7.42929 6.38545L1.96352 0.919676C1.96351 0.919673 1.96351 0.919669 1.96351 0.919666C1.75876 0.714984 1.4811 0.6 1.19159 0.6C0.902079 0.6 0.624425 0.71498 0.419676 0.919655C0.419669 0.919662 0.419662 0.919669 0.419655 0.919676M7.5 6.45616L0.419655 0.919676M7.5 6.45616L7.57071 6.38545M7.5 6.45616L7.57071 6.38545M0.419655 0.919676C0.21498 1.12442 0.1 1.40208 0.1 1.69159C0.1 1.9811 0.214984 2.25876 0.419666 2.46351M0.419655 0.919676L0.419666 2.46351M0.419666 2.46351C0.419669 2.46351 0.419673 2.46351 0.419676 2.46352M0.419666 2.46351L0.419676 2.46352M0.419676 2.46352L5.88545 7.92929M0.419676 2.46352L5.88545 7.92929M7.57071 6.38545L13.0365 0.919676C13.0365 0.919673 13.0365 0.919669 13.0365 0.919666C13.2412 0.714984 13.5189 0.6 13.8084 0.6C14.0979 0.6 14.3756 0.71498 14.5803 0.919655C14.785 1.12441 14.9 1.40207 14.9 1.69159C14.9 1.9811 14.785 2.25876 14.5803 2.46351C14.5803 2.46351 14.5803 2.46351 14.5803 2.46352L9.11455 7.92929L9.04384 8L9.11455 8.07071L14.5803 13.5365C14.5803 13.5365 14.5803 13.5365 14.5803 13.5365M7.57071 6.38545L14.5803 13.5365M5.95616 8L5.88545 8.07071L0.419676 13.5365C0.419673 13.5365 0.419669 13.5365 0.419666 13.5365C0.214984 13.7412 0.1 14.0189 0.1 14.3084C0.1 14.5979 0.21498 14.8756 0.419655 15.0803C0.624405 15.285 0.902069 15.4 1.19159 15.4C1.4811 15.4 1.75876 15.285 1.96351 15.0803C1.96351 15.0803 1.96351 15.0803 1.96352 15.0803L7.42929 9.61455L7.5 9.54384L7.57071 9.61455L13.0365 15.0803C13.0365 15.0803 13.0365 15.0803 13.0365 15.0803C13.2412 15.285 13.5189 15.4 13.8084 15.4C14.0979 15.4 14.3756 15.285 14.5803 15.0803C14.5803 15.0803 14.5803 15.0803 14.5803 15.0803M5.95616 8L14.5803 15.0803M5.95616 8L5.88545 7.92929M5.95616 8L5.88545 7.92929M14.5803 15.0803C14.785 14.8756 14.9 14.5979 14.9 14.3084C14.9 14.0189 14.785 13.7412 14.5803 13.5365M14.5803 15.0803L14.5803 13.5365" fill="#222222" stroke="#222222" stroke-width="1"></path>
            </svg>
          </span>
        </button>
        <div class="max-w-md mx-auto">
          <form action="">
            <h3 class="text-3xl font-medium tracking-tight mb-10">Sign up to studio</h3>
            <a class="flex h-15 items-center justify-center py-2 px-8 font-medium text-sm sm:text-base tracking-tight border-1.5 border-coolGray-100 hover:border-coolGray-300 mb-2 rounded-full" href="#">
              <img src="asitrastudio-assets/sign-in/google.svg" alt="">
              <span class="ml-2 sm:ml-4 text-black">Sign up with Google</span>
            </a>
            <a class="flex h-15 items-center justify-center py-2 px-8 font-medium text-sm sm:text-base tracking-tight border-1.5 border-coolGray-100 hover:border-coolGray-300 mb-8 rounded-full" href="#">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.7478 0C12.7876 0 12.8274 0 12.8695 0C12.9671 1.20593 12.5068 2.107 11.9474 2.75952C11.3985 3.40754 10.6469 4.03603 9.43117 3.94067C9.35007 2.75201 9.81112 1.91777 10.3698 1.26675C10.8879 0.660032 11.8378 0.120142 12.7478 0Z" fill="#222222"></path>
                <path d="M16.4254 12.5517C16.4254 12.5638 16.4254 12.5743 16.4254 12.5855C16.0837 13.6203 15.5964 14.5071 15.0017 15.33C14.4588 16.0772 13.7935 17.0826 12.6056 17.0826C11.5791 17.0826 10.8973 16.4226 9.84534 16.4046C8.73252 16.3865 8.12055 16.9565 7.10309 17.0999C6.98671 17.0999 6.87032 17.0999 6.75618 17.0999C6.00905 16.9917 5.40608 16.4 4.96681 15.8669C3.67153 14.2916 2.6706 12.2566 2.48438 9.65256C2.48438 9.39725 2.48438 9.1427 2.48438 8.8874C2.56322 7.02369 3.46879 5.5084 4.67247 4.77403C5.30772 4.38357 6.181 4.05092 7.1534 4.1996C7.57015 4.26418 7.9959 4.40685 8.36909 4.54801C8.72276 4.68392 9.16504 4.92496 9.58403 4.91219C9.86787 4.90393 10.1502 4.75601 10.4363 4.65164C11.2743 4.34903 12.0958 4.00212 13.1785 4.16506C14.4798 4.36179 15.4034 4.93998 15.9741 5.83203C14.8733 6.53261 14.003 7.58836 14.1517 9.39125C14.2838 11.0289 15.236 11.9871 16.4254 12.5517Z" fill="#222222"></path>
              </svg>
              <span class="ml-2 sm:ml-4 text-black">Sign up with Apple</span>
            </a>
            <div class="flex mb-8 items-center">
              <div class="py-px w-full bg-coolGray-100"></div>
              <span class="text-xs mx-5 text-coolGray-600 uppercase">or</span>
              <div class="py-px w-full bg-coolGray-100"></div>
            </div>
            <div>
              <input class="block w-full h-15 py-4 px-8 mb-4 text-coolGray-500 bg-white border-1.5 border-coolGray-400 rounded-full" type="text" placeholder="Full name">
              <input class="block w-full h-15 py-4 px-8 mb-4 text-coolGray-500 bg-white border-1.5 border-coolGray-400 rounded-full" type="email" placeholder="E-mail">
              <div class="relative block w-full h-15 py-4 px-8 mb-6 text-coolGray-500 bg-white border-1.5 border-coolGray-400 rounded-full">
                <input class="w-full h-full outline-none" type="password" placeholder="Password">
                <button class="absolute top-0 right-0 mt-5 p-0 mr-8">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.1095 7.89167L7.89283 12.1083C7.33367 11.5492 7.01953 10.7908 7.01953 10C7.01953 9.60845 7.09665 9.22073 7.24649 8.85898C7.39634 8.49723 7.61596 8.16854 7.89283 7.89167C8.1697 7.6148 8.49839 7.39518 8.86014 7.24533C9.22189 7.09549 9.60961 7.01837 10.0012 7.01837C10.7919 7.01837 11.5503 7.33251 12.1095 7.89167Z" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M14.8518 4.80834C13.3935 3.70834 11.7268 3.10834 10.0018 3.10834C7.06016 3.10834 4.31849 4.84167 2.41016 7.84167C1.66016 9.01667 1.66016 10.9917 2.41016 12.1667C3.06849 13.2 3.83516 14.0917 4.66849 14.8083M7.01849 16.275C7.96849 16.675 8.97682 16.8917 10.0018 16.8917C12.9435 16.8917 15.6852 15.1583 17.5935 12.1583C18.3435 10.9833 18.3435 9.00834 17.5935 7.83334C17.3185 7.4 17.0185 6.99167 16.7102 6.60834" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M12.9263 10.5833C12.8134 11.1646 12.5294 11.699 12.1106 12.1177C11.6919 12.5364 11.1576 12.8204 10.5763 12.9333M7.89297 12.1083L1.66797 18.3333M18.3346 1.66667L12.1096 7.89167" stroke="#151515" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </button>
              </div>
              <button class="block w-full mb-6 py-5 px-8 sm:px-24 text-center font-medium text-white leading-none bg-coolGray-500 hover:bg-black rounded-full transition duration-150" type="submit">Sign up</button>
              <div class="max-w-sm mx-auto text-center">
                <p class="text-xs text-coolGray-500 leading-4">
                  <span>By signing up, you agree to Capital’s</span>
                  <a class="inline-block text-coolGray-600" href="#">Terms of Service, Privacy Policy</a>
                  <span>and Deposit Account Agreement</span>
                </p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from Coleos

Tailwind CSS

Coleos

Split-screen sign-up form with promotional hero panel

A split-screen sign-up section with a purple promotional panel on the left featuring a heading and body text, and a light card on the right containing a Create new account form with name, email, and password fields, a terms checkbox, a Sign Up button, and a Sign In link.

<section class="relative overflow-hidden">
  <div class="relative flex flex-wrap">
    <div class="w-full lg:w-9/12 xl:w-2/3 relative bg-purple-500 pt-24 pb-64 lg:py-32 h-full lg:min-h-screen flex items-center">
      <img class="absolute top-0 left-0" src="coleos-assets/sign-in/yellow-circle-part.png" alt="">
      <img class="hidden lg:block absolute top-0 left-72 mt-24" src="coleos-assets/sign-in/pink-icon-bg.png" alt="">
      <img class="absolute top-1/2 left-36" src="coleos-assets/sign-in/pink-dot-small.png" alt="">
      <img class="absolute bottom-0 left-0 bg-opacity-20 w-full h-full" src="coleos-assets/sign-in/bg-gradient.png" alt="">
      <img class="absolute right-0 top-0 h-full" src="coleos-assets/sign-in/blue-circle-half.png" alt="">
      <div class="relative z-10 px-4 mx-auto lg:ml-12 xl:mr-0 xl:ml-20 max-w-md xl:max-w-lg">
        <h1 class="text-white text-4xl xl:text-5xl font-semibold mb-9 font-heading max-w-lg">Join over 2,500,000 community and explore the world</h1>
        <p class="text-purple-300 max-w-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
    </div>
    <div class="relative w-full lg:w-3/12 xl:w-1/3 px-4 lg:min-h-screen bg-white">
      <div class="lg:absolute top-0 right-0 w-full h-full py-12 lg:py-0 max-w-lg lg:max-w-none mx-auto -mt-40 lg:-mt-0 lg:mx-0 lg:min-w-max flex items-center z-50">
        <div class="transform lg:-ml-64 xl:-ml-0 xl:-translate-x-1/2 lg:max-w-md bg-purple-100 rounded-lg py-12 px-6 lg:px-8">
          <form action="">
            <p class="uppercase text-rhino-300 text-xs font-bold tracking-widest mb-1 text-center">SIGN UP</p>
            <h1 class="font-heading font-semibold text-4xl text-rhino-700 text-center mb-8">Create new account</h1>
            <div class="flex flex-wrap gap-4 mb-4">
              <div class="flex-1">
                <input class="py-3 px-4 rounded-sm border border-coolGray-200 bg-white w-full outline-none focus:ring-1 ring-indigo-400" type="text" placeholder="Enter">
              </div>
              <div class="flex-1">
                <input class="py-3 px-4 rounded-sm border border-coolGray-200 bg-white w-full outline-none focus:ring-1 ring-indigo-400" type="text" placeholder="Enter">
              </div>
            </div>
            <input class="py-3 px-4 rounded-sm border border-coolGray-200 bg-white mb-4 w-full outline-none focus:ring-1 ring-indigo-400" type="text" placeholder="Enter">
            <input class="py-3 px-4 rounded-sm border border-coolGray-200 bg-white mb-8 w-full outline-none focus:ring-1 ring-indigo-400" type="text" placeholder="Enter">
            <div class="flex items-center gap-3 mb-8">
              <div class="relative">
                <input class="custom-checkbox-1 opacity-0 absolute z-10 h-5 w-5 top-0 left-0" id="checkbox1" type="checkbox" checked="">
                <div class="border border-coolGray-200 w-5 h-5 flex justify-center items-center rounded-sm bg-white">
                  <svg class="hidden" width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.76764 0.22597C9.45824 -0.0754185 8.95582 -0.0752285 8.64601 0.22597L3.59787 5.13702L1.35419 2.95437C1.04438 2.65298 0.542174 2.65298 0.23236 2.95437C-0.0774534 3.25576 -0.0774534 3.74431 0.23236 4.0457L3.03684 6.77391C3.19165 6.92451 3.39464 7 3.59765 7C3.80067 7 4.00386 6.9247 4.15867 6.77391L9.76764 1.31727C10.0775 1.01609 10.0775 0.52734 9.76764 0.22597Z" fill="currentColor"></path>
                  </svg>
                </div>
              </div>
              <label class="block text-rhino-300 text-sm" for="checkbox1">
                <span>By signing up, you agree to our</span>
                <span class="text-rhino-700">Terms, Data Policy and Cookies Policy.</span>
              </label>
            </div>
            <a class="rounded-sm py-3 px-4 bg-purple-500 shadow-md text-white font-medium text-sm w-full mb-4 block text-center hover:bg-purple-600 transition duration-200" href="#">Sign Up</a>
            <a class="group text-sm text-center block" href="#">
              <span class="text-rhino-300 group-hover:text-rhino-400 transition duration-200">Already have an account?</span>
              <span class="text-rhino-700 group-hover:text-rhino-800 transition duration-200">Sign In</span>
            </a>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from Suncealand

Tailwind CSS

Suncealand

Split-screen sign-up hero with photo and register panel

A split-screen promotional section with a full-bleed street photograph and serif headline on the left, and a dark rounded panel on the right containing a "Click here and register" call to action. It introduces a registration entry point over a black background with faint decorative arcs.

<section class="relative py-20 md:py-40 bg-black overflow-hidden">
  <img class="absolute top-0 mt-16 left-0 w-full" src="suncealand-assets/background/circle-large-bg-signup-2.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="px-6 py-8 sm:px-8 relative max-w-2xl mx-auto lg:max-w-none rounded-2xl overflow-hidden">
      <img class="absolute top-0 left-0 w-full h-full object-cover" src="suncealand-assets/background/woman-walking-signup.png" alt="">
      <div class="relative flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-24 lg:mb-0">
          <div class="max-w-sm mx-auto pt-24 lg:pt-52 lg:pb-14">
            <h3 class="font-heading text-5xl sm:text-7xl sm:text-8xl text-yellowGray-500 mb-8">Sign up to suncealand</h3>
            <a class="group inline-flex items-center font-base font-normal text-white" href="#">
              <span class="mr-2">The house by the pond cras ornare.</span>
              <div class="relative transition duration-500 animate-pulse">
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                </svg>
                <div class="absolute top-0 right-0 -mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                  <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                  </svg>
                </div>
                <div class="absolute top-0 right-0 -mr-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                  <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>
                  </svg>
                </div>
              </div>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/2 xl:w-auto ml-auto px-4">
          <a class="group flex h-full py-20 px-6 xl:px-16 items-center justify-center bg-gray-800 rounded-3xl" href="#">
            <div class="flex items-center justify-center w-40 sm:w-72 xl:w-88 h-40 sm:h-72 xl:h-88 px-4 rounded-full border border-gray-500 group-hover:border-gray-300 transition duration-300">
              <span class="text-center sm:text-2xl text-white font-semibold transform group-hover:rotate-45 transition duration-700">Click here and register</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Sign in / Sign up from Sirius Dashboard

Tailwind CSS

Sirius Dashboard

Split-screen sign-up form with app dashboard showcase

A split-screen sign-up page with a left-side registration form (username, email, password, remember me, and a Sign up button) and a right-side panel showing illustrative dashboard cards with charts and metrics. The right panel uses a dark navy background with a carousel-style caption and pagination dots.

<section class="relative py-8" x-data="{ activeSlide: 1 }">
    <div class="flex flex-wrap -m-4">
        <div class="w-full lg:w-1/2 p-4">
            <div class="lg:py-20 px-4">
                <div class="max-w-md mx-auto">
                    <a class="inline-block mb-12" href="#">
                        <img class="h-6" src="sirius-assets/images/logos/sirius-logo.svg" alt="">
                    </a>
                    <h2 class="mb-8 text-blue-900 text-3xl font-semibold">Pleased to meet you! 👋</h2>
                    <p class="mb-8 text-gray-500 text-sm">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat nostrud amet.</p>
                    <form>
                        <label class="block text-gray-500 text-sm mb-2" for="username">Username</label>
                        <input class="w-full rounded-2xl border border-gray-200 px-6 py-3 mb-6 focus:ring-2 focus:ring-gray-200 transition duration-200 outline-none" type="text" id="username" placeholder="Super Mario">
                        <label class="block text-gray-500 text-sm mb-2" for="email">Email Address</label>
                        <input class="w-full rounded-2xl border border-gray-200 px-6 py-3 mb-6 focus:ring-2 focus:ring-gray-200 transition duration-200 outline-none" type="text" id="email" placeholder="supermario@example.com">
                        <label class="block text-gray-500 text-sm mb-2" for="password">Password</label>
                        <input class="w-full rounded-2xl border border-gray-200 px-6 py-3 mb-6 focus:ring-2 focus:ring-gray-200 transition duration-200 outline-none" type="password" id="password" placeholder="*******">
                        <div class="flex items-center mb-8">
                            <div class="mr-4">
                                <input class="custom-checkbox-1 opacity-0 absolute z-10 h-4 w-4" id="remember-me" type="checkbox">
                                <div class="bg-white text-white border border-gray-200 w-4 h-4 flex justify-center items-center rounded-md">
                                    <svg class="hidden" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 12 12" fill="none">
                                        <path d="M10.125 3.37523L4.875 8.625L2.25 6.00023" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </div>
                            </div>
                            <label class="text-gray-500 text-sm" for="remember-me">Remember me</label>
                        </div>
                        <button type="submit" class="w-full mb-4 text-center px-6 py-3 h-full rounded-2xl text-white text-sm font-medium shadow-sm bg-blue-500 hover:bg-blue-600 focus:ring focus:ring-blue-300 transition duration-200">Sign up</button>
                        <p class="text-center text-gray-500 text-sm">
                            <span>Already have an account?</span>
                            <a href="#" class="font-medium text-blue-500 hover:text-blue-600 transition duration-200">Login 🚀</a>
                        </p>
                    </form>
                </div>
                <div class="lg:hidden mt-8 bg-blue-900 py-16 px-8 max-w-md mx-auto text-center">
                    <div class="overflow-hidden">
                        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500" style="transform: translateX(-0%)">
                            <div class="flex-shrink-0 px-4 w-full">
                                <h5 class="mb-4 text-xl font-semibold text-white">Stay up to date with your audience</h5>
                                <p class="mb-10 text-sm text-opacity-80 text-white">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
                            </div>
                            <div class="flex-shrink-0 px-4 w-full">
                                <h5 class="mb-4 text-xl font-semibold text-white">Engage with Your Community</h5>
                                <p class="mb-10 text-sm text-opacity-80 text-white">Stay connected by understanding your audience's needs and preferences. Open communication fosters loyalty and strengthens relationships.</p>
                            </div>
                            <div class="flex-shrink-0 px-4 w-full">
                                <h5 class="mb-4 text-xl font-semibold text-white">Build Trust Through Communication</h5>
                                <p class="mb-10 text-sm text-opacity-80 text-white">Consistent and transparent messaging builds credibility, helping your audience feel valued and understood.</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-center">
                        <button x-on:click="activeSlide=1" class="rounded-full w-2 h-2 mr-3" :class="{'bg-red-500': activeSlide==1,'bg-gray-500': activeSlide!=1}"></button>
                        <button x-on:click="activeSlide=2" class="rounded-full w-2 h-2 mr-3" :class="{'bg-red-500': activeSlide==2,'bg-gray-500': activeSlide!=2}"></button>
                        <button x-on:click="activeSlide=3" class="rounded-full w-2 h-2" :class="{'bg-red-500': activeSlide==3,'bg-gray-500': activeSlide!=3}"></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="hidden lg:block absolute top-0 bottom-0 right-0 w-1/2 bg-blue-900">
            <img class="object-cover w-full object-bottom" style=" max-height: 750px;" src="sirius-assets/images/background.png" alt="">
            <div class="relative -mt-20 max-w-md mx-auto text-center">
                <div class="overflow-hidden">
                    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100 + '%)'" class="flex -mx-4 transition-transform duration-500" style="transform: translateX(-0%)">
                        <div class="flex-shrink-0 px-4 w-full">
                            <h5 class="mb-4 text-xl font-semibold text-white">Stay up to date with your audience</h5>
                            <p class="mb-10 text-sm text-opacity-80 text-white">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
                        </div>
                        <div class="flex-shrink-0 px-4 w-full">
                            <h5 class="mb-4 text-xl font-semibold text-white">Engage with Your Community</h5>
                            <p class="mb-10 text-sm text-opacity-80 text-white">Stay connected by understanding your audience's needs and preferences. Open communication fosters loyalty and strengthens relationships.</p>
                        </div>
                        <div class="flex-shrink-0 px-4 w-full">
                            <h5 class="mb-4 text-xl font-semibold text-white">Build Trust Through Communication</h5>
                            <p class="mb-10 text-sm text-opacity-80 text-white">Consistent and transparent messaging builds credibility, helping your audience feel valued and understood.</p>
                        </div>
                    </div>
                </div>
                <div class="flex justify-center">
                    <button x-on:click="activeSlide=1" class="rounded-full w-2 h-2 mr-3" :class="{'bg-red-500': activeSlide==1,'bg-gray-500': activeSlide!=1}"></button>
                    <button x-on:click="activeSlide=2" class="rounded-full w-2 h-2 mr-3" :class="{'bg-red-500': activeSlide==2,'bg-gray-500': activeSlide!=2}"></button>
                    <button x-on:click="activeSlide=3" class="rounded-full w-2 h-2" :class="{'bg-red-500': activeSlide==3,'bg-gray-500': activeSlide!=3}"></button>
                </div>
            </div>
        </div>
    </div>
</section>

Login and registration is a sensitive part of any site. When designing this type of component, one should think very carefully about the amount of data to be obtained, their order and importance. Acquiring new users and maintaining ties with registered users keeps the site alive. That's why Tailwind Sign in and Sing up components collected in Shuffle Editor are refined to a pixel perfect state. When choosing the right version for your project, you certainly won't run out of options!

Choose from many variations of Tailwind sign in and sign up components. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Tailwind sign in/sign up components, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Sign in / Sign up Components

Framework

UI Library

Components

Sign in / Sign up from Acros

Split-screen account creation form with photo panel

Sign in / Sign up from Bendis

Split-screen sign-in page with marketing headline and social login options

Sign in / Sign up from Metis

Metis Sign In Split-Screen Form with Social Login

Your next website starts here

Sign in / Sign up from Shuffle UX

Split-screen sign-up form with slate hero panel

Sign in / Sign up from Cronos

Split-Screen Sign-Up Hero with Account Creation Form

Sign in / Sign up from NEUB

Split-screen hero with sign-up form and bold pink and yellow blocks

Sign in / Sign up from Casper

Dark Sign-Up Form with Social Login and Illustrated Side Panel

Sign in / Sign up from Mirga

Split-screen account registration form with Google sign-in and orange promotional panel

Sign in / Sign up from Flow

Split-screen account creation form with green energy imagery

Sign in / Sign up from Vista

Split-Screen Login Form with App Preview

Sign in / Sign up from Cyber

Cyberpunk Split-Screen Sign-In Hero with Neon Headline

Sign in / Sign up from FilyTreck

Split-screen registration form with photo panel and social sign-in

Sign in / Sign up from Aurora

Split-Screen Login Form with Testimonial Panel

Sign in / Sign up from asitrastudio

Sign-up Modal with Social Login and Email Form

Sign in / Sign up from Coleos

Split-screen sign-up form with promotional hero panel

Sign in / Sign up from Suncealand

Split-screen sign-up hero with photo and register panel

Sign in / Sign up from Sirius Dashboard

Split-screen sign-up form with app dashboard showcase

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support