Login section with google, facebook and apple

User login form with social login

HTML

<section class="ezy__signin12 py-5">
  <div class="container">
    
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ezy__signin12">
      Sign In 12 (click to open modal)
    </button>
  </div>
</section>
<div class="ezy__signin12 modal fade" id="ezy__signin12" tabindex="-1" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content overflow-hidden border-0">
      <button type="button" class="btn-close position-absolute end-0 top-0 mt-3 me-3" data-bs-dismiss="modal"
        aria-label="Close">
        <i class="fas fa-times"></i>
      </button>
      <div class="modal-body p-0 position-relative">
        <div class="row py-4 justify-content-center">
          <div class="col-12">
            <div class="card ezy__signin12-form-card">
              <div class="card-body p-md-5">
                <h2 class="ezy__signin12-heading text-center">Your Courses Are Waiting</h2>
                <p class="text-center small">Create an account to Get Started</p>

                <button class="btn btn-danger ezy__signin12-btn w-100 d-flex align-items-center mt-4 mb-3">
                  <span class="fab fa-google text-white fs-4"></span>
                  <span class="w-100 text-center text-white">Continue with Google</span>
                </button>
                <button class="btn btn-primary ezy__signin12-btn w-100 d-flex align-items-center">
                  <span class="fab fa-facebook text-white fs-4"></span>
                  <span class="w-100 text-center text-white">Continue with Facebook</span>
                </button>

                <div class="position-relative ezy__signin12-or-separator">
                  <hr class="my-4 mt-md-5" />
                  <span class="px-2">Or</span>
                </div>

                <form>
                  <div class="form-group mb-4">
                    <label for="email" class="mb-2">Email </label>
                    <input type="text" class="form-control" id="email" />
                  </div>

                  <div class="form-group mb-3">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" value="" id="remember-me" checked />
                      <label class="form-check-label" for="remember-me">Keep me up to date on class events and new
                        releases</label>
                    </div>
                  </div>
                  <button type="submit" class="btn ezy__signin12-btn-submit w-100">CONTINUE TO THIS EMAIL</button>

                  <div class="text-center mt-4">
                    <p class="mb-0">
                      By signing up or creating an account, you agree to our <br />
                      <a href="">Privacy Policy and Terms & Service.</a>
                    </p>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.ezy__signin12 {
  /* Bootstrap variables */
  --bs-body-color: #000;
  --bs-body-bg: rgb(255, 255, 255);

  /* Easy Frontend variables */
  --ezy-theme-color: rgb(13, 110, 253);
  --ezy-theme-color-rgb: 13, 110, 253;
  --ezy-form-card-bg: #fff;
  --ezy-form-card-shadow: 0 16px 24px rgba(197, 206, 222, 0.25);
  overflow: hidden;
}

/* Gray Block Style */
.gray .ezy__signin12,
.ezy__signin12.gray {
  /* Bootstrap variables */
  --bs-body-bg: rgb(246, 246, 246);

  /* Easy Frontend variables */
  --ezy-form-card-bg: #f6f6f6;
  --ezy-form-card-shadow: 0 16px 24px rgba(209, 223, 247, 0.25);
}

/* Dark Gray Block Style */
.dark-gray .ezy__signin12,
.ezy__signin12.dark-gray {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(30, 39, 53);
  --bs-dark-rgb: 255, 255, 255;

  /* Easy Frontend variables */
  --ezy-form-card-bg: rgb(30, 39, 53);
  --ezy-form-card-shadow: none;
}

/* Dark Block Style */
.dark .ezy__signin12,
.ezy__signin12.dark {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(11, 23, 39);
  --bs-dark-rgb: 255, 255, 255;

  /* Easy Frontend variables */
  --ezy-form-card-bg: rgb(11, 23, 39);
  --ezy-form-card-shadow: none;
}

.ezy__signin12-heading {
  font-weight: bold;
  font-size: 25px;
  line-height: 25px;
  color: var(--bs-body-color);
}

/* modal */
section.ezy__signin12,
.ezy__signin12 .modal-content {
  background-color: var(--bs-body-bg);
}

.ezy__signin12 .btn-close {
  z-index: 11;
  color: var(--bs-body-color);
  background-image: none;
}

.ezy__signin12-form-card {
  background-color: var(--ezy-form-card-bg);
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.ezy__signin12-form-card * {
  color: var(--bs-body-color);
}

.ezy__signin12 .form-control {
  min-height: 48px;
  line-height: 40px;
  border-color: transparent;
  background: rgba(163, 190, 241, 0.14);
  color: var(--bs-body-color);
}

.ezy__signin12 .form-control:focus {
  border-color: var(--ezy-theme-color);
  box-shadow: none;
}

.ezy__signin12 .form-check-input:checked {
  background-color: var(--ezy-theme-color);
  border-color: var(--ezy-theme-color);
}

.ezy__signin12-btn-submit {
  padding: 12px 30px;
  background-color: var(--ezy-theme-color);
  color: #ffffff;
}

.ezy__signin12-btn-submit:hover {
  color: #ffffff;
  background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
}

.ezy__signin12-btn {
  padding: 12px 30px;
}

.ezy__signin12-btn,
.ezy__signin12-btn * {
  color: #ffffff;
}

.ezy__signin12-btn:hover {
  color: #ffffff;
}

.ezy__signin12-or-separator {
  position: relative;
}

.ezy__signin12-or-separator hr {
  border-color: var(--bs-body-color);
  opacity: 0.15;
}

.ezy__signin12-or-separator span {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0.8;
}

.ezy__signin12 a:hover {
  color: var(--ezy-theme-color);
}
</style>

Bootstrap

React JS

import React, { useState } from "react";
import {
	Button,
	Card,
	Col,
	Container,
	Form,
	Modal,
	Row,
} from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebook, faGoogle } from "@fortawesome/free-brands-svg-icons";
import { faTimes } from "@fortawesome/free-solid-svg-icons";

const SocialLoginButton = () => (
	<>
		<Button
			variant="danger"
			className="ezy__signin12-btn w-100 d-flex align-items-center mt-4 mb-3"
		>
			<FontAwesomeIcon icon={faGoogle} className="text-white fs-4" />
			<span className="w-100 text-center text-white">Continue with Google</span>
		</Button>
		<Button
			variant="primary"
			className="ezy__signin12-btn w-100 d-flex align-items-center"
		>
			<FontAwesomeIcon icon={faFacebook} className="text-white fs-4" />
			<span className="w-100 text-center text-white">
				Continue with Facebook
			</span>
		</Button>
	</>
);

const SignUpForm = () => (
	<Form>
		<Form.Group className="mb-4">
			<Form.Label htmlFor="email" className="mb-2">
				Email
			</Form.Label>
			<Form.Control type="text" id="email" />
		</Form.Group>

		<Form.Group className="mb-3">
			<Form.Check
				type="checkbox"
				label="Keep me up to date on class events and new releases"
				htmlFor="remember-me"
			/>
		</Form.Group>
		<Button variant="" className="ezy__signin12-btn-submit w-100">
			CONTINUE TO THIS EMAIL
		</Button>

		<div className="text-center mt-4">
			<p className="mb-0">
				By signing up or creating an account, you agree to our <br />
				<a href="#!">Privacy Policy and Terms &amp; Service.</a>
			</p>
		</div>
	</Form>
);

const Signin12 = () => {
	const [show, setShow] = useState(false);
	const handleClose = () => setShow(false);
	const handleShow = () => setShow(true);

	return (
		<>
			<section className="ezy__signin12 py-5">
				<Container>
					{/* Button trigger modal  */}
					<Button variant="primary" onClick={handleShow}>
						Sign In 12 (click to open modal)
					</Button>
				</Container>
			</section>
			<Modal
				show={show}
				onHide={handleClose}
				className="ezy__signin12"
				contentClassName="overflow-hidden border-0"
				centered={true}
			>
				<Button
					variant="close"
					className="position-absolute end-0 top-0 mt-3 me-3"
					onClick={handleClose}
				>
					<FontAwesomeIcon icon={faTimes} />
				</Button>

				<Modal.Body className="p-0 position-relative">
					<Row className="py-4 justify-content-center">
						<Col xs={12}>
							<Card className="ezy__signin12-form-card">
								<Card.Body className="p-md-5">
									<h2 className="ezy__signin12-heading text-center">
										Your Courses Are Waiting
									</h2>
									<p className="text-center small">
										Create an account to Get Started
									</p>

									{/* Social Login Buttons */}
									<SocialLoginButton />

									<div className="position-relative ezy__signin12-or-separator">
										<hr className="my-4 mt-md-5" />
										<span className="px-2">Or</span>
									</div>

									{/* form */}
									<SignUpForm />
								</Card.Body>
							</Card>
						</Col>
					</Row>
				</Modal.Body>
			</Modal>
		</>
	);
};

<style>
.ezy__signin12 {
	/* Bootstrap variables */
	--bs-body-color: #000;
	--bs-body-bg: rgb(255, 255, 255);

	/* Easy Frontend variables */
	--ezy-theme-color: rgb(13, 110, 253);
	--ezy-theme-color-rgb: 13, 110, 253;
	--ezy-form-card-bg: #fff;
	--ezy-form-card-shadow: 0 16px 24px rgba(197, 206, 222, 0.25);
	overflow: hidden;
}

/* Gray Block Style */
.gray .ezy__signin12,
.ezy__signin12.gray {
	/* Bootstrap variables */
	--bs-body-bg: rgb(246, 246, 246);

	/* Easy Frontend variables */
	--ezy-form-card-bg: #f6f6f6;
	--ezy-form-card-shadow: 0 16px 24px rgba(209, 223, 247, 0.25);
}

/* Dark Gray Block Style */
.dark-gray .ezy__signin12,
.ezy__signin12.dark-gray {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(30, 39, 53);
	--bs-dark-rgb: 255, 255, 255;

	/* Easy Frontend variables */
	--ezy-form-card-bg: rgb(30, 39, 53);
	--ezy-form-card-shadow: none;
}

/* Dark Block Style */
.dark .ezy__signin12,
.ezy__signin12.dark {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(11, 23, 39);
	--bs-dark-rgb: 255, 255, 255;

	/* Easy Frontend variables */
	--ezy-form-card-bg: rgb(11, 23, 39);
	--ezy-form-card-shadow: none;
}

.ezy__signin12-heading {
	font-weight: bold;
	font-size: 25px;
	line-height: 25px;
	color: var(--bs-body-color);
}

/* modal */
section.ezy__signin12,
.ezy__signin12 .modal-content {
	background-color: var(--bs-body-bg);
}

.ezy__signin12 .btn-close {
	z-index: 11;
	color: var(--bs-body-color);
	background-image: none;
}

.ezy__signin12-form-card {
	background-color: var(--ezy-form-card-bg);
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.ezy__signin12-form-card * {
	color: var(--bs-body-color);
}

.ezy__signin12 .form-control {
	min-height: 48px;
	line-height: 40px;
	border-color: transparent;
	background: rgba(163, 190, 241, 0.14);
	color: var(--bs-body-color);
}

.ezy__signin12 .form-control:focus {
	border-color: var(--ezy-theme-color);
	box-shadow: none;
}

.ezy__signin12 .form-check-input:checked {
	background-color: var(--ezy-theme-color);
	border-color: var(--ezy-theme-color);
}

.ezy__signin12-btn-submit {
	padding: 12px 30px;
	background-color: var(--ezy-theme-color);
	color: #ffffff;
}

.ezy__signin12-btn-submit:hover {
	color: #ffffff;
	background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
}

.ezy__signin12-btn {
	padding: 12px 30px;
}

.ezy__signin12-btn,
.ezy__signin12-btn * {
	color: #ffffff;
}

.ezy__signin12-btn:hover {
	color: #ffffff;
}

.ezy__signin12-or-separator {
	position: relative;
}

.ezy__signin12-or-separator hr {
	border-color: var(--bs-body-color);
	opacity: 0.15;
}

.ezy__signin12-or-separator span {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	opacity: 0.8;
}

.ezy__signin12 a:hover {
	color: var(--ezy-theme-color);
}
</style>

import React, { Fragment, useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebook, faGoogle } from "@fortawesome/free-brands-svg-icons";
import { faTimes } from "@fortawesome/free-solid-svg-icons";

const SocialLoginButton = () => (
	<Fragment>
		<button className="bg-red-600 text-white py-3 px-6 rounded w-full flex items-center mt-4 opacity-100 hover:opacity-90">
			<FontAwesomeIcon icon={faGoogle} className=" mr-2 text-white text-2xl" />
			<span className="w-full text-center">Continue with Google</span>
		</button>
		<button className="bg-blue-600 text-white py-3 px-6 rounded w-full flex items-center mt-4 opacity-100 hover:opacity-90">
			<FontAwesomeIcon icon={faFacebook} className="mr-2 text-white text-2xl" />
			<span className="w-full  text-center">Continue with Facebook</span>
		</button>
	</Fragment>
);

const SignUpForm = () => (
	<form>
		<div className="mb-4">
			<label className="block mb-2 font-normal" htmlFor="email">
				Email
			</label>
			<input
				type="text"
				className="w-full bg-blue-50 dark:bg-slate-800 min-h-[48px] leading-10 px-4 p-2 rounded-lg outline-none border border-transparent focus:border-blue-700"
				id="email"
			/>
		</div>

		<div className="mb-3">
			<input className="mr-2" type="checkbox" htmlFor="remember-me" />
			<label className="font-normal" htmlFor="remember-me">
				Keep me up to date on class events and new releases
			</label>
		</div>
		<button className="bg-blue-500 text-white py-3 px-8 rounded w-full">
			CONTINUE TO THIS EMAIL
		</button>

		<div className="text-center mt-4">
			<p className="mb-0">
				By signing up or creating an account, you agree to our <br />
				<a
					href="src/components/bootstrap/categories/signinForms/SignIn12#!"
					className="underline"
				>
					Privacy Policy and Terms &amp; Service.
				</a>
			</p>
		</div>
	</form>
);

const Signin12 = () => {
	const [show, setShow] = useState(false);
	const handleClose = () => setShow(false);
	const handleShow = () => setShow(true);

	return (
		<>
			<section className="ezy__signin12 py-11 bg-white dark:bg-[#0b1727] text-white relative overflow-hidden z-10">
				<div className="container px-4 mx-auto">
					{/* Button trigger modal  */}
					<button
						className="bg-blue-600 text-white hover:bg-opacity-90 py-2 px-4 rounded"
						onClick={handleShow}
					>
						Sign In 12(Click to open Modal)
					</button>
				</div>
			</section>
			<div className={show ? "" : "hidden"}>
				<div className="bg-white dark:bg-gray-900 text-zinc-900 dark:text-white overflow-hidden relative max-w-[90vw] sm:max-w-[80vw] lg:max-w-[45vw] xl:max-w-[30vw] rounded mx-auto my-14 p-10">
					<button
						className="absolute right-0 top-0 mt-4 mr-4 z-20"
						onClick={handleClose}
					>
						<FontAwesomeIcon icon={faTimes} />
					</button>

					<div className="p-0 relative">
						<div className="grid grid-cols-12 py-4 justify-center">
							<div className="col-span-12">
								<div className="md:p-5">
									<h2 className="font-bold text-3xl leading-6  text-center p-2 m-2">
										Your Courses Are Waiting
									</h2>
									<p className="text-center small">
										Create an account to Get Started
									</p>

									{/* Social Login Buttons */}
									<SocialLoginButton />

									<div className="relative">
										<hr className="my-8 border-t border-gray-300" />
										<span className="px-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-900">
											Or
										</span>
									</div>

									{/* form */}
									<SignUpForm />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</>
	);
};



Sign In Form #12Login section with google and facebook

Available resources

Share with

Tags

You may also like