Login with half width image

User login form with social login

A simple login form with social login button.

HTML

<section class="ezy__signin5 d-flex">
  <div class="container">
    <div class="row justify-content-center align-items-center h-100">
      <div class="col-lg-10 py-5">
        <div class="card ezy__signin5-form-card">
          <div class="card-body p-md-5">
            <div class="row mb-4 mb-md-5">
              <div class="col-md-6">
                <h2 class="ezy__signin5-heading mb-3">Welcome to Easy Frontend</h2>
              </div>
              <div class="col-md-6">
                <p class="mb-0 text-md-end">
                  <span class="opacity-50 me-2">Don't have an account?</span>
                  <a href="#" class="btn btn-link p-0 text-dark text-decoration-none">Create account</a>
                </p>
              </div>
            </div>
            <form>
              <div class="row justify-content-between">
                <div class="col-md-6 col-lg-5">
                  <div class="form-group mb-4 mt-2">
                    <label for="email" class="mb-2">Email Address</label>
                    <input type="text" class="form-control" id="email" placeholder="Enter Email Address" />
                  </div>
                  <div class="form-group mb-2 mt-2">
                    <label for="password" class="mb-2">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Enter 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"> Remember me </label>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-5">
                  <button type="submit" class="btn ezy__signin5-btn-submit w-100">
                    Log In
                    <span class="fas fa-arrow-right ms-2 text-white"></span>
                  </button>
                  <button class="btn w-100">Forget your password?</button>

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

                  <button class="btn btn-primary ezy__signin5-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-danger ezy__signin5-btn w-100 d-flex align-items-center">
                    <span class="fab fa-google text-white fs-4"></span>
                    <span class="w-100 text-center text-white">Continue with Google</span>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.ezy__signin5 {
  /* Bootstrap variables */
  --bs-body-color: #333b7b;
  --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: #e7f6ff;
  --ezy-form-card-shadow: none;

  background-color: var(--bs-body-bg);
  overflow: hidden;
}

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__signin5,
.ezy__signin5.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: #253140;
  --ezy-form-card-shadow: none;
}

/* Dark Block Style */
.dark .ezy__signin5,
.ezy__signin5.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: #162231;
  --ezy-form-card-shadow: none;
}

.ezy__signin5 .container {
  min-height: 100vh;
}

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

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

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

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

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

.ezy__signin5-btn-submit {
  padding: 12px 30px;
  background-color: #333b7b;
  color: #ffffff;
}

.ezy__signin5-btn-submit:hover {
  color: #ffffff;
}

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

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

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

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

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

.ezy__signin5-or-separator span {
  background-color: var(--ezy-form-card-bg);
  color: var(--bs-body-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0.8;
}
</style>

Bootstrap

<section class="ezy__signin5 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
  <div class="container px-4 mx-auto">
    <div class="flex justify-center items-center h-full max-w-6xl mx-auto">
      <div class="w-full bg-blue-100 bg-opacity-70 dark:bg-slate-800 shadow-xl p-6 md:p-12 xl:p-14 rounded-2xl">
        <div class="flex flex-col md:flex-row items-center justify-between mb-6 md:mb-12">
          <h2 class="text-indigo-900 dark:text-white text-3xl font-bold mb-4">Welcome to Easy Frontend!</h2>
          <p class="mb-4 md:text-end">
            <span class="opacity-50 mr-2">Don't have an account?</span>
            <a href="#" class="btn btn-link p-0 text-dark text-decoration-none">Create Account</a>
          </p>
        </div>
        <form>
          <div class="grid grid-cols-12 gap-6">
            <div class="col-span-12 md:col-span-6 lg:col-span-5">
              <div class="">
                <div class="mb-4">
                  <label class="block mb-2 font-normal" for="email">Email Address</label>
                  <input
                    type="text"
                    class="w-full bg-blue-50 dark:bg-slate-700 min-h-[48px] leading-10 px-4 p-2 rounded-lg outline-none border border-transparent focus:border-blue-600"
                    id="email"
                    placeholder="Enter Email Address"
                  />
                </div>
                <div class="mb-4">
                  <label class="block mb-2 font-normal" for="password">Password</label>
                  <input
                    type="password"
                    class="w-full bg-blue-50 dark:bg-slate-700 min-h-[48px] leading-10 px-4 p-2 rounded-lg outline-none border border-transparent focus:border-blue-600"
                    id="password"
                    placeholder="Enter Password"
                  />
                </div>
                <div class="mb-4">
                  <input type="checkbox" class="mr-2" id="remember-me" checked />
                  <label class="font-normal" for="remember-me">Remember me</label>
                </div>
              </div>
            </div>
            <div class="col-span-12 md:col-span-6 lg:col-span-5 lg:col-start-8">
              <button type="submit" class="bg-indigo-800 text-white px-7 py-3 rounded w-full">
                Log In <i class="fas fa-arrow-right ml-2"></i>
              </button>
              <div class="mt-3 flex justify-center items-center">
                <a href="#" class="opacity-75">Forget Your Password?</a>
              </div>

              <div class="relative">
                <hr class="my-6 md:my-12 border-gray-400" />
                <span
                  class="px-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-100 dark:bg-slate-800"
                  >Or</span
                >
              </div>

              <button class="w-full flex justify-center items-center bg-blue-600 rounded py-3 px-5 mb-3">
                <span class="fab fa-facebook text-white text-2xl"></span>
                <span class="w-full text-center text-white">Continue with Facebook</span>
              </button>
              <button class="w-full flex justify-center items-center bg-red-500 rounded py-3 px-5 mb-3">
                <span class="fab fa-google text-white text-2xl"></span>
                <span class="w-full text-center text-white">Continue with Google</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>



Tailwind CSS

React JS

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

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

const SignInForm = () => {
	return (
		<Fragment>
			<Form.Group className="mb-4 mt-2">
				<Form.Label>Email Address</Form.Label>
				<Form.Control type="email" placeholder="Enter Email Address" />
				<Form.Control.Feedback type="valid">Message</Form.Control.Feedback>
			</Form.Group>
			<Form.Group className="mb-2 mt-2">
				<Form.Label>Password</Form.Label>
				<Form.Control type="password" placeholder="Enter Password" />
				<Form.Control.Feedback type="valid">Message</Form.Control.Feedback>
			</Form.Group>
			<Form.Group className="mb-3">
				<Form.Check
					type="checkbox"
					id="signin5-remember-me"
					label="Remember me"
				/>
				<Form.Control.Feedback type="valid">Message</Form.Control.Feedback>
			</Form.Group>
		</Fragment>
	);
};

const SignInFormCard = () => {
	const [validated, setValidated] = useState(false);

	const handleSubmit = (event) => {
		event.preventDefault();

		const form = event.currentTarget;
		if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
		}

		setValidated(true);
	};

	return (
		<Card className="ezy__signin5-form-card">
			<Card.Body className="p-md-5">
				<Row className="mb-4 mb-md-5">
					<Col md={6}>
						<h2 className="ezy__signin5-heading mb-3">
							Welcome to Easy Frontend
						</h2>
					</Col>
					<Col md={6}>
						<p className="mb-0 text-md-end">
							<span className="opacity-50 me-2">Don't have an account?</span>
							<Button
								variant="link"
								className="p-0 text-dark text-decoration-none"
							>
								Create account
							</Button>
						</p>
					</Col>
				</Row>
				<Form
					className="pe-md-4"
					noValidate
					validated={validated}
					onSubmit={handleSubmit}
				>
					<Row className="justify-content-between">
						<Col md={6} lg={5}>
							<SignInForm />
						</Col>
						<Col md={6} lg={5}>
							<Button
								variant=""
								type="submit"
								className="ezy__signin5-btn-submit w-100"
							>
								Log In
								<span className="ms-2 text-white">
									<FontAwesomeIcon icon={faArrowRight} />
								</span>
							</Button>
							<Button variant="" type="button" className="w-100">
								Forget your password?
							</Button>

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

							<SocialLoginButton />
						</Col>
					</Row>
				</Form>
			</Card.Body>
		</Card>
	);
};

const SignIn5 = () => {
	return (
		<section className="ezy__signin5 d-flex">
			<Container>
				<Row className="justify-content-center align-items-center h-100">
					<Col lg={10} className="py-5">
						<SignInFormCard />
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__signin5 {
	/* Bootstrap variables */
	--bs-body-color: #333b7b;
	--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: #e7f6ff;
	--ezy-form-card-shadow: none;

	background-color: var(--bs-body-bg);
	overflow: hidden;
}

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__signin5,
.ezy__signin5.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: #253140;
	--ezy-form-card-shadow: none;
}

/* Dark Block Style */
.dark .ezy__signin5,
.ezy__signin5.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: #162231;
	--ezy-form-card-shadow: none;
}

.ezy__signin5 .container {
	min-height: 100vh;
}

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

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

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

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

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

.ezy__signin5-btn-submit {
	padding: 12px 30px;
	background-color: #333b7b;
	color: #ffffff;
}

.ezy__signin5-btn-submit:hover {
	color: #ffffff;
}

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

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

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

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

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

.ezy__signin5-or-separator span {
	background-color: var(--ezy-form-card-bg);
	color: var(--bs-body-color);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	opacity: 0.8;
}
</style>

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

const SocialLoginButton = () => (
	<Fragment>
		<button className="w-full flex justify-center items-center bg-blue-600 rounded py-3 px-5 mb-3">
			<FontAwesomeIcon icon={faFacebook} className="text-2xl text-white" />
			<span className="w-full text-center text-white">
				Continue with Facebook
			</span>
		</button>
		<button className="w-full flex justify-center items-center bg-red-500 rounded py-3 px-5 mb-3">
			<span className="fab fa-google text-white text-2xl"></span>
			<FontAwesomeIcon icon={faGoogle} className="text-white text-2xl" />
			<span className="w-full text-center text-white">
				Continue with Google
			</span>
		</button>
	</Fragment>
);

const SignInForm = () => {
	const [validated, setValidated] = useState(false);

	const handleSubmit = (event) => {
		event.preventDefault();

		const form = event.currentTarget;
		if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
		}

		setValidated(true);
	};

	return (
		<form noValidate validated={validated} onSubmit={handleSubmit}>
			<div className="grid grid-cols-12 gap-6">
				<div className="col-span-12 md:col-span-6 lg:col-span-5">
					<div className="">
						<div className="mb-4">
							<label className="block mb-2 font-normal" htmlFor="email">
								Email Address
							</label>
							<input
								type="text"
								className="w-full bg-blue-50 dark:bg-slate-700 min-h-[48px] leading-10 px-4 p-2 rounded-lg outline-none border border-transparent focus:border-blue-600"
								id="email"
								placeholder="Enter Email Address"
							/>
						</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-700 min-h-[48px] leading-10 px-4 p-2 rounded-lg outline-none border border-transparent focus:border-blue-600"
								id="password"
								placeholder="Enter Password"
							/>
						</div>
						<div className="mb-4">
							<input
								type="checkbox"
								className="mr-2"
								id="remember-me"
								checked
							/>
							<label className="font-normal" htmlFor="remember-me">
								Remember me
							</label>
						</div>
					</div>
				</div>
				<div className="col-span-12 md:col-span-6 lg:col-span-5 lg:col-start-8">
					<button
						type="submit"
						className="bg-indigo-800 text-white px-7 py-3 rounded w-full"
					>
						Log In
						<FontAwesomeIcon icon={faArrowRight} className="ml-2" />
					</button>
					<div className="mt-3 flex justify-center items-center">
						<a href="#!" className="opacity-75">
							Forget Your Password?
						</a>
					</div>

					<div className="relative">
						<hr className="my-6 md:my-12 border-gray-400" />
						<span className="px-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-blue-100 dark:bg-slate-800">
							Or
						</span>
					</div>

					<SocialLoginButton />
				</div>
			</div>
		</form>
	);
};

const SignIn5 = () => {
	return (
		<section className="ezy__signin5 py-14 md:py-24 bg-white dark:bg-[#0b1727] text-zinc-900 dark:text-white">
			<div className="container px-4 mx-auto">
				<div className="flex justify-center items-center h-full max-w-6xl mx-auto">
					<div className="w-full bg-blue-100 bg-opacity-70 dark:bg-slate-800 shadow-xl p-6 md:p-12 xl:p-14 rounded-2xl">
						<div className="flex flex-col md:flex-row items-center justify-between mb-6 md:mb-12">
							<h2 className="text-indigo-900 dark:text-white text-3xl font-bold mb-4">
								Welcome to Easy Frontend!
							</h2>
							<p className="mb-4 md:text-end">
								<span className="opacity-50 mr-2">Don't have an account?</span>
								<a
									href="#!"
									className="btn btn-link p-0 text-dark text-decoration-none"
								>
									Create Account
								</a>
							</p>
						</div>
						<SignInForm />
					</div>
				</div>
			</div>
		</section>
	);
};



Sign In Form #5Login form with social login button

Available resources

Share with

Tags

You may also like