Login with image

User login form with social login

HTML

<section class="ezy__signin8 d-flex">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <div class="card ezy__signin8-card">
          <div class="card-body p-0">
            <div class="row justify-content-between h-100">
              <div class="col-lg-5">
                <div class="ezy__signin8-bg-holder d-none d-lg-block h-100"
                  style="background-image: url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-3.png)">
                </div>
              </div>
              <div class="col-lg-7 py-4 py-lg-5">
                <div class="row align-items-center justify-content-center h-100">
                  <div class="col-11 col-lg-10">
                    <div class="card ezy__signin8-form-card">
                      <div class="card-body p-3 p-md-4 p-lg-5">
                        <h2 class="ezy__signin8-heading mb-4">Welcome to Easy Frontend</h2>

                        <div class="mb-4">
                          <button class="btn btn-primary ezy__signin8-btn me-2">
                            <span class="fab fa-facebook-f text-white fs-4"></span>
                            
                          </button>
                          <button class="btn btn-danger ezy__signin8-btn">
                            <span class="fab fa-google text-white fs-4"></span>
                            
                          </button>
                        </div>

                        <p class="my-4 fw-bold">Or</p>

                        <form>
                          <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>
                          <button type="submit" class="btn ezy__signin8-btn-submit w-100">Log In</button>
                          <button class="btn px-0">Forget your password?</button>

                          <p class="mt-4 mt-md-5 mb-0">
                            <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>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.ezy__signin8 {
  /* 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-card-bg: #f9f4f0;
  --ezy-form-card-bg: #ffffff;
  --ezy-form-card-shadow: none;

  background-color: var(--bs-body-bg);
  padding: 40px 0;
  overflow: hidden;
}

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

  /* Easy Frontend variables */
  --ezy-card-bg: #fff5f1;
  --ezy-form-card-bg: #f6f6f6;
  --ezy-form-card-shadow: none;
}

/* Dark Gray Block Style */
.dark-gray .ezy__signin8,
.ezy__signin8.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-card-bg: #fff4ec;
  --ezy-form-card-bg: #1e2a38;
  --ezy-form-card-shadow: none;
}

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

  /* Easy Frontend variables */
  --ezy-card-bg: #f9f4f0;
  --ezy-form-card-bg: #162231;
  --ezy-form-card-shadow: none;
}

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

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

@media (min-width: 768px) {
  .ezy__signin8-heading {
    font-size: 35px;
    line-height: 35px;
  }
}

.ezy__signin8-bg-holder {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 150px;
  width: 100%;
}

.ezy__signin8-card {
  background-color: var(--ezy-card-bg);
  border-radius: 15px;
  overflow: hidden;
  border: none;
}

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

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

.ezy__signin8 .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__signin8 .form-control:focus {
  border-color: var(--ezy-theme-color);
  box-shadow: none;
}

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

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

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

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

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

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

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

.ezy__signin8-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__signin8 py-14 bg-white dark:bg-[#0b1727] text-indigo-900 dark:text-white">
  <div class="container px-4 mx-auto">
    <div class="flex justify-center items-center w-full lg:max-w-5xl mx-auto rounded-2xl overflow-hidden bg-red-50">
      <div class="grid grid-cols-12 gap-6 h-full w-full">
        <div class="col-span-12 lg:col-span-5">
          <div
            class="bg-center bg-no-repeat bg-cover min-h-[150px] hidden lg:block w-full h-full"
            style="background-image: url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-3.png)"
          ></div>
        </div>
        <div class="col-span-12 lg:col-span-7 p-6 lg:p-12">
          <div class="w-full h-full bg-white dark:bg-[#0b1727] rounded-2xl p-6 lg:p-12">
            <h2 class="text-indigo-900 dark:text-white text-3xl md:text-4xl font-bold mb-3">
              Welcome to Easy Frontend!
            </h2>

            <div class="flex gap-3 mb-6">
              <button class="w-20 flex justify-center items-center bg-blue-600 rounded py-4 px-5 mb-3">
                <span class="fab fa-facebook text-white text-2xl"></span>
              </button>
              <button class="w-20 flex justify-center items-center bg-red-500 rounded py-4 px-5 mb-3">
                <span class="fab fa-google text-white text-2xl"></span>
              </button>
            </div>

            <p class="my-6 font-bold">Or</p>

            <form>
              <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>
              <button class="bg-indigo-900 text-white py-3 px-6 rounded w-full">Log In</button>
              <button class="hover:text-blue-600 py-2 px-4 rounded-lg">Forget your password?</button>
              <div class="flex items-center my-6 md:mt-12">
                <p class="mb-0 mr-2 opacity-50">Don't have an account?</p>
                <a href="#" class="">Create Account</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



Tailwind CSS

React JS

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

const SocialLoginButton = () => (
	<div className="mb-4">
		<Button variant="primary" className="ezy__signin8-btn me-2">
			<span className="text-white fs-4 lh-1">
				<FontAwesomeIcon icon={faFacebookF} />
			</span>
		</Button>
		<Button variant="danger" className="ezy__signin8-btn">
			<span className="text-white fs-4 lh-1">
				<FontAwesomeIcon icon={faGoogle} />
			</span>
		</Button>
	</div>
);

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
			className="pe-md-4"
			noValidate
			validated={validated}
			onSubmit={handleSubmit}
		>
			<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="signin8-remember-me"
					label="Remember me"
				/>
				<Form.Control.Feedback type="valid">Message</Form.Control.Feedback>
			</Form.Group>

			<Button
				variant=""
				type="submit"
				className="ezy__signin8-btn-submit w-100"
			>
				Log In
			</Button>
			<Button variant="" type="button" className="px-0 text-end">
				Forget your password?
			</Button>
		</Form>
	);
};

const SignInFormCard = () => (
	<Card className="ezy__signin8-form-card">
		<Card.Body className="p-3 p-md-4 p-lg-5">
			<h2 className="ezy__signin8-heading mb-3">Welcome to Easy Frontend</h2>

			<SocialLoginButton />
			<p className="my-4 fw-bold">Or</p>

			<SignInForm />

			<p className="mt-4 mt-md-5 mb-0">
				<span className="mb-0 opacity-50 lh-1">Don't have an account?</span>
				<Button variant="link" className="py-0 text-dark text-decoration-none">
					Create account
				</Button>
			</p>
		</Card.Body>
	</Card>
);

const SignIn8 = () => {
	return (
		<section className="ezy__signin8 d-flex">
			<Container>
				<Row className="justify-content-center">
					<Col lg={10}>
						<Card className="ezy__signin8-card">
							<Card.Body className="p-0">
								<Row className="justify-content-between h-100">
									<Col lg={5}>
										<div
											className="ezy__signin8-bg-holder d-none d-lg-block h-100"
											style={{
												backgroundImage:
													"url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-3.png)",
											}}
										/>
									</Col>
									<Col lg={7} className="py-4 py-lg-5">
										<Row className="align-items-center justify-content-center h-100">
											<Col xs={11} lg={10}>
												<SignInFormCard />
											</Col>
										</Row>
									</Col>
								</Row>
							</Card.Body>
						</Card>
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__signin8 {
	/* 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-card-bg: #f9f4f0;
	--ezy-form-card-bg: #ffffff;
	--ezy-form-card-shadow: none;

	background-color: var(--bs-body-bg);
	padding: 40px 0;
	overflow: hidden;
}

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

	/* Easy Frontend variables */
	--ezy-card-bg: #fff5f1;
	--ezy-form-card-bg: #f6f6f6;
	--ezy-form-card-shadow: none;
}

/* Dark Gray Block Style */
.dark-gray .ezy__signin8,
.ezy__signin8.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-card-bg: #fff4ec;
	--ezy-form-card-bg: #1e2a38;
	--ezy-form-card-shadow: none;
}

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

	/* Easy Frontend variables */
	--ezy-card-bg: #f9f4f0;
	--ezy-form-card-bg: #162231;
	--ezy-form-card-shadow: none;
}

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

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

@media (min-width: 768px) {
	.ezy__signin8-heading {
		font-size: 35px;
		line-height: 35px;
	}
}

.ezy__signin8-bg-holder {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 150px;
	width: 100%;
}

.ezy__signin8-card {
	background-color: var(--ezy-card-bg);
	border-radius: 15px;
	overflow: hidden;
	border: none;
}

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

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

.ezy__signin8 .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__signin8 .form-control:focus {
	border-color: var(--ezy-theme-color);
	box-shadow: none;
}

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

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

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

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

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

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

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

.ezy__signin8-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 } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFacebook, faGoogle } from "@fortawesome/free-brands-svg-icons";

const SocialLoginButton = () => (
	<div className="flex gap-3 mb-6">
		<button className="w-20 flex justify-center items-center bg-blue-600 rounded py-4 px-5 mb-3">
			<FontAwesomeIcon icon={faFacebook} className="text-white text-2xl" />
		</button>
		<button className="w-20 flex justify-center items-center bg-red-500 rounded py-4 px-5 mb-3">
			<FontAwesomeIcon icon={faGoogle} className="text-white text-2xl" />
		</button>
	</div>
);

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="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>
			<button className="bg-indigo-900 text-white py-3 px-6 rounded w-full">
				Log In
			</button>
			<button className="hover:text-blue-600 py-2 px-4 rounded-lg">
				Forget your password?
			</button>
			<div className="flex items-center my-6 md:mt-12">
				<p className="mb-0 mr-2 opacity-50">Don't have an account?</p>
				<a href="#!">Create Account</a>
			</div>
		</form>
	);
};

const SignIn8 = () => {
	return (
		<section className="ezy__signin8 py-14 bg-white dark:bg-[#0b1727] text-indigo-900 dark:text-white">
			<div className="container px-4 mx-auto">
				<div className="flex justify-center items-center w-full lg:max-w-5xl mx-auto rounded-2xl overflow-hidden bg-red-50">
					<div className="grid grid-cols-12 gap-6 h-full w-full">
						<div className="col-span-12 lg:col-span-5">
							<div
								className="bg-center bg-no-repeat bg-cover min-h-[150px] hidden lg:block w-full h-full"
								style={{
									backgroundImage:
										"url(https://cdn.easyfrontend.com/pictures/sign-in-up/sign-in-up-3.png)",
								}}
							></div>
						</div>
						<div className="col-span-12 lg:col-span-7 p-6 lg:p-12">
							<div className="w-full h-full bg-white dark:bg-[#0b1727] rounded-2xl p-6 lg:p-12">
								<h2 className="text-indigo-900 dark:text-white text-3xl md:text-4xl font-bold mb-3">
									Welcome to Easy Frontend!
								</h2>

								<SocialLoginButton />

								<p className="my-6 font-bold">Or</p>

								<SignInForm />
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};



Sign In Form #8Login section with image

Available resources

Share with

Tags

You may also like