Login section with round user image

User login form with social login

Login section with google, facebook and apple

HTML

<section class="ezy__signin13 d-flex align-items-center">
  <div class="container">
    
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ezy__signin13">
      Sign In 13 (click to open modal)
    </button>
  </div>
</section>
<div class="ezy__signin13 modal fade" id="ezy__signin13" 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__signin13-form-card">
              <div class="card-body p-md-5">
                <h2 class="ezy__signin13-heading text-center">Log In</h2>

                <button class="btn btn-danger ezy__signin13-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__signin13-btn w-100 d-flex align-items-center mb-3">
                  <span class="fab fa-facebook text-white fs-4"></span>
                  <span class="w-100 text-center text-white">Continue with Facebook</span>
                </button>
                <button class="btn btn-dark ezy__signin13-btn w-100 d-flex align-items-center">
                  <span class="fab fa-apple text-white fs-4"></span>
                  <span class="w-100 text-center text-white">Continue with Apple</span>
                </button>

                <div class="position-relative ezy__signin13-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-4">
                    <label for="password" class="mb-2">Password </label>
                    <input type="password" class="form-control" id="password" />
                  </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__signin13-btn-submit w-100">Log In</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__signin13 {
        /* 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-shadow: 0 16px 24px rgba(197, 206, 222, 0.25);

        padding: 60px 0;
        overflow: hidden;
      }

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

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

      /* Dark Gray Block Style */
      .dark-gray .ezy__signin13,
      .ezy__signin13.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-shadow: none;
      }

      /* Dark Block Style */
      .dark .ezy__signin13,
      .ezy__signin13.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-shadow: none;
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .ezy__signin13-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__signin13 a:hover {
        color: var(--ezy-theme-color);
      }
</style>

Bootstrap

React JS

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

const SocialLoginButton = () => (
	<>
		<Button
			variant="danger"
			className="ezy__signin13-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__signin13-btn w-100 d-flex align-items-center mb-3"
		>
			<FontAwesomeIcon icon={faFacebook} className="text-white fs-4" />
			<span className="w-100 text-center text-white">
				Continue with Facebook
			</span>
		</Button>
		<Button
			variant="dark"
			className="ezy__signin13-btn w-100 d-flex align-items-center"
		>
			<FontAwesomeIcon icon={faApple} className="text-white fs-4" />
			<span className="w-100 text-center text-white">Continue with Apple</span>
		</Button>
	</>
);

const SignInForm = () => (
	<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-4">
			<Form.Label htmlFor="password" className="mb-2">
				Password
			</Form.Label>
			<Form.Control type="password" id="password" />
		</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.Check>
		</Form.Group>
		<Button variant="" type="submit" className="ezy__signin13-btn-submit w-100">
			Log In
		</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 Signin13 = () => {
	const [show, setShow] = useState(false);
	const handleClose = () => setShow(false);
	const handleShow = () => setShow(true);

	return (
		<>
			<section className="ezy__signin13 d-flex align-items-center">
				<Container>
					{/* Button trigger modal  */}
					<Button variant="primary" onClick={handleShow}>
						Sign In 13 (click to open modal)
					</Button>
				</Container>
			</section>
			<Modal
				show={show}
				onHide={handleClose}
				className="ezy__signin13"
				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__signin13-form-card">
								<Card.Body className="p-md-5">
									<h2 className="ezy__signin13-heading text-center">Log In</h2>

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

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

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

<style>
.ezy__signin13 {
	/* 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-shadow: 0 16px 24px rgba(197, 206, 222, 0.25);

	padding: 60px 0;
	overflow: hidden;
}

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__signin13,
.ezy__signin13.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-shadow: none;
}

/* Dark Block Style */
.dark .ezy__signin13,
.ezy__signin13.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-shadow: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ezy__signin13-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__signin13 a:hover {
	color: var(--ezy-theme-color);
}
</style>

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

const SocialLoginButton = () => (
	<>
		<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>
		<button className="bg-gray-700 text-white py-3 px-6 rounded w-full flex items-center mt-4 opacity-100 hover:opacity-90">
			<FontAwesomeIcon icon={faApple} className=" mr-2 text-white text-2xl" />
			<span className="w-full text-center text-white">Continue with Apple</span>
		</button>
	</>
);

const SignInForm = () => (
	<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-4">
			<label className="block mb-2 font-normal" htmlFor="password">
				Password
			</label>
			<input
				type="password"
				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="password"
			/>
		</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">
			Log In
		</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/SignIn13#!"
					className="underline"
				>
					Privacy Policy and Terms &amp; Service.
				</a>
			</p>
		</div>
	</form>
);

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

	return (
		<>
			<section className="ezy__signin13 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 13(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">
										Log In
									</h2>

									{/* 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 */}
									<SignInForm />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</>
	);
};



Sign In Form #13Login section with google, facebook and apple

Available resources

Share with

Tags

You may also like