Signup Form 2 TailwindCSS
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);
}
}
