Signup form block for user registration on websites and landing pages.

Dependencies

  • Tailwind CSS
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Tailwind CSS Blocks - Signup Form 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="signup-2 xl:flex md:py-6 xl:py-12 h-screen">
        <div class="signup-bg md:absolute md:top-0 md:bottom-0 md:right-0"></div>
        <div class="container px-4 mx-auto flex flex-col justify-center">
            <div class="md:w-1/2 xl:w-5/12 py-6 md:py-12">
                <h1 class="text-3xl md:text-4xl leading-tight">Sign Up to discover<br>FWR blocks</h1>
                <div class="signup-form mt-6">
                    <div class="mb-4 flex flex-col">
                        <label for="fullname" class="font-medium text-sm text-gray-600 uppercase mb-2">Name</label>
                        <input id="fullname" type="text" class="border border-solid rounded py-2 px-3 focus:border-indigo-600 transition-colors duration-300">
                    </div>
                    <div class="mb-4 flex flex-col">
                        <label for="email" class="font-medium text-sm text-gray-600 uppercase mb-2">Email</label>
                        <input id="email" type="email" class="border border-solid rounded py-2 px-3 focus:border-indigo-600 transition-colors duration-300">
                    </div>
                    <div class="mb-4 flex flex-col">
                        <label for="password" class="font-medium text-sm text-gray-600 uppercase mb-2">Password</label>
                        <input id="password" type="password" class="border border-solid rounded py-2 px-3 focus:border-indigo-600 transition-colors duration-300">
                    </div>
                    <div class="custom-checkbox pl-8 mb-4 relative mt-6">
                        <input type="checkbox" id="agree" class="absolute left-0 top-0 opacity-0">
                        <label for="agree" class="pl-2">By signing up, you agree to Our Terms and Privacy Policy</label>
                    </div>
                    <div class="mt-6 md:mt-12">
                        <button class="bg-indigo-600 hover:bg-indigo-700 text-xl text-white rounded-full py-2 px-6 md:px-8 xl:px-12 transition-colors duration-300">Create an Account</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.signup-2 -->

    <!-- Scripts -->
</body>
</html>
// VARIABLES
$primary:    #5863f8;
$light-gray: #e2e8f0;

// Custom CSS
.custom-checkbox {
  input {
    z-index: -1;

    &:checked ~ label {
      &::before {
        background-color: $primary;
        box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba($primary, 0.25);
      }

      &::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
      }
    }
  }

  label {
    padding-top: 6px;

    &::before,
    &::after {
      content: "";
      top: 0;
      left: 0;
      width: 1.5rem;
      height: 1.5rem;
      position: absolute;
      display: block;
    }

    &::after {
      background: no-repeat 50%/50% 50%;
    }

    &::before {
      border: 1px solid $light-gray;
      pointer-events: none;
    }
  }
}

@media (min-width: 768px) {
  .signup-bg {
    background: url('https://assets.free-website-resources.com/img/signup-bg.jpg') no-repeat center center / cover;
    width: calc(50vw - 24px);
  }
}

@media (min-width: 1200px) {
  .signup-bg {
    width: calc(50vw - 60px);
  }
}

@media (min-width: 1440px) {
  .signup-bg {
    width: calc(50vw - 100px);
  }
}

.custom-checkbox input {
  z-index: -1;
}

.custom-checkbox input:checked ~ label::before {
  background-color: #5863f8;
  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(88, 99, 248, 0.25);
          box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(88, 99, 248, 0.25);
}

.custom-checkbox input:checked ~ label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox label {
  padding-top: 6px;
}

.custom-checkbox label::before, .custom-checkbox label::after {
  content: "";
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  display: block;
}

.custom-checkbox label::after {
  background: no-repeat 50%/50% 50%;
}

.custom-checkbox label::before {
  border: 1px solid #e2e8f0;
  pointer-events: none;
}

@media (min-width: 768px) {
  .signup-bg {
    background: url("https://assets.free-website-resources.com/img/signup-bg.jpg") no-repeat center center/cover;
    width: calc(50vw - 24px);
  }
}

@media (min-width: 1200px) {
  .signup-bg {
    width: calc(50vw - 60px);
  }
}

@media (min-width: 1440px) {
  .signup-bg {
    width: calc(50vw - 100px);
  }
}
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvdGFpbHdpbmRjc3MvZm9ybS9zaWdudXAtZm9ybS0y