Login section with gradient background

User login form with social login

HTML

<section class="ezy__signin14 py-5">
  <div class="container">
    
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ezy__signin14">
      Sign In 14 (click to open modal)
    </button>
  </div>
</section>
<div
  class="ezy__signin14 modal fade"
  id="ezy__signin14"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content overflow-hidden border-0 rounded-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 justify-content-center">
          <div class="col-12">
            <div class="card ezy__signin14-form-card">
              <div class="card-body p-md-5">
                <div class="d-flex justify-content-center align-items-center pb-3">
                  <img
                    src="https://cdn.easyfrontend.com/pictures/testimonial/testimonial_square_1.jpeg"
                    alt=""
                    class="rounded-circle border-0"
                    width="100"
                    height="100"
                  />
                </div>
                <h2 class="ezy__signin14-heading text-center mt-4 pb-2 mb-0">Log In</h2>

                <form class="mt-4">
                  <div class="form-group mb-3">
                    <input type="text" class="form-control ps-4" id="email" placeholder="Enter your email" />
                  </div>
                  <div class="form-group mb-3">
                    <input
                      type="password"
                      class="form-control ps-4"
                      id="password"
                      placeholder="Enter your password"
                    />
                  </div>
                  <button type="submit" class="btn ezy__signin14-btn-submit mt-3 w-100">Log In</button>

                  <div class="text-center mt-5 pt-4">
                    <p class="mb-0">
                      No Account ?
                      <a href="#!">Create An Account</a>
                    </p>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.ezy__signin14 {
  /* Bootstrap variables */
  --bs-body-color: #333333;
  --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-border-color: rgba(119, 126, 144, 0.5);
}

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__signin14,
.ezy__signin14.dark-gray {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(64, 65, 86);
  --bs-dark-rgb: 255, 255, 255;

  /* Easy Frontend variables */
  --ezy-form-card-bg: rgb(64, 65, 86);
  --ezy-border-color: rgba(255, 255, 255, 0.43);
}

/* Dark Block Style */
.dark .ezy__signin14,
.ezy__signin14.dark {
  /* Bootstrap variables */
  --bs-body-color: #ffffff;
  --bs-body-bg: rgb(46, 47, 65);
  --bs-dark-rgb: 255, 255, 255;

  /* Easy Frontend variables */
  --ezy-form-card-bg: rgb(46, 47, 65);
  --ezy-border-color: rgba(255, 255, 255, 0.43);
}

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

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

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

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

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

.ezy__signin14 .form-control {
  min-height: 45px;
  line-height: 40px;
  border: 1px solid var(--ezy-border-color);
  background-color: transparent;
  color: var(--bs-body-color);
}

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

.ezy__signin14-btn-submit {
  height: 45px;
  padding: 10px 30px;
  font-weight: 600;
  font-size: 16;
  line-height: 1;
  background-color: var(--ezy-theme-color);
  color: #ffffff;
}

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

.ezy__signin14 a {
  text-decoration: none;
  color: var(--ezy-theme-color);
}

.ezy__signin14 a:hover {
  color: rgba(var(--ezy-theme-color-rgb), 0.9);
}
</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 { faTimes } from "@fortawesome/free-solid-svg-icons";

const SignInForm = () => (
	<Form className="mt-4">
		<Form.Group className="mb-3">
			<Form.Control
				type="text"
				className="ps-4"
				id="email"
				placeholder="Enter your email"
			/>
		</Form.Group>
		<Form.Group className="mb-3">
			<Form.Control
				type="password"
				className="ps-4"
				id="password"
				placeholder="Enter your password"
			/>
		</Form.Group>
		<Button
			variant=""
			type="submit"
			className="ezy__signin14-btn-submit mt-3 w-100"
		>
			Log In
		</Button>

		<div className="text-center mt-5 pt-4">
			<p className="mb-0">
				No Account?{" "}
				<a href="src/components/bootstrap/categories/signinForms/SignIn14#!">
					Create An Account
				</a>
			</p>
		</div>
	</Form>
);

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

	return (
		<>
			<section className="ezy__signin14 py-5">
				<Container>
					{/* Button trigger modal  */}
					<Button variant="primary" onClick={handleShow}>
						Sign In 14 (click to open modal)
					</Button>
				</Container>
			</section>
			<Modal
				className="ezy__signin14"
				show={show}
				onHide={handleClose}
				centered
				contentClassName="overflow-hidden border-0 rounded-0"
			>
				<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="justify-content-center">
						<Col xs={12}>
							<Card className="ezy__signin14-form-card">
								<Card.Body className="p-md-5">
									<div className="d-flex justify-content-center align-items-center pb-3">
										<img
											src="https://cdn.easyfrontend.com/pictures/testimonial/testimonial_square_1.jpeg"
											alt=""
											className="rounded-circle border-0"
											width="100"
											height="100"
										/>
									</div>
									<h2 className="ezy__signin14-heading text-center mt-4 pb-2 mb-0">
										Log In
									</h2>

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

<style>
.ezy__signin14 {
	/* Bootstrap variables */
	--bs-body-color: #333333;
	--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-border-color: rgba(119, 126, 144, 0.5);
}

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

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

/* Dark Gray Block Style */
.dark-gray .ezy__signin14,
.ezy__signin14.dark-gray {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(64, 65, 86);
	--bs-dark-rgb: 255, 255, 255;

	/* Easy Frontend variables */
	--ezy-form-card-bg: rgb(64, 65, 86);
	--ezy-border-color: rgba(255, 255, 255, 0.43);
}

/* Dark Block Style */
.dark .ezy__signin14,
.ezy__signin14.dark {
	/* Bootstrap variables */
	--bs-body-color: #ffffff;
	--bs-body-bg: rgb(46, 47, 65);
	--bs-dark-rgb: 255, 255, 255;

	/* Easy Frontend variables */
	--ezy-form-card-bg: rgb(46, 47, 65);
	--ezy-border-color: rgba(255, 255, 255, 0.43);
}

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

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

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

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

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

.ezy__signin14 .form-control {
	min-height: 45px;
	line-height: 40px;
	border: 1px solid var(--ezy-border-color);
	background-color: transparent;
	color: var(--bs-body-color);
}

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

.ezy__signin14-btn-submit {
	height: 45px;
	padding: 10px 30px;
	font-weight: 600;
	font-size: 16;
	line-height: 1;
	background-color: var(--ezy-theme-color);
	color: #ffffff;
}

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

.ezy__signin14 a {
	text-decoration: none;
	color: var(--ezy-theme-color);
}

.ezy__signin14 a:hover {
	color: rgba(var(--ezy-theme-color-rgb), 0.9);
}
</style>

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

const SignInForm = () => (
	<form className="mt-4">
		<div className="mb-4">
			<input
				type="text"
				className="w-full bg-transparent min-h-[48px] leading-10 px-4 p-2 rounded-md outline-none border border-gray-400 dark:border-slate-700 focus:border-blue-600 dark:focus:border-blue-700"
				id="email"
				placeholder="Enter your email"
			/>
		</div>
		<div className="mb-4">
			<input
				type="password"
				className="w-full bg-transparent min-h-[48px] leading-10 px-4 p-2 rounded-md outline-none border border-gray-400 dark:border-slate-700 focus:border-blue-600 dark:focus:border-blue-700"
				id="password"
				placeholder="Enter your password"
			/>
		</div>
		<button
			type="submit"
			className="font-semibold bg-blue-500 text-white py-3 px-8 rounded w-full mt-6"
		>
			Log In
		</button>

		<div className="text-center mt-5 pt-4">
			<p className="mb-0">
				No Account?{" "}
				<a
					href="src/components/bootstrap/categories/signinForms/SignIn14#!"
					className="text-blue-600"
				>
					Create An Account
				</a>
			</p>
		</div>
	</form>
);

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

	return (
		<>
			<section className="ezy__signin14 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 14(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">
									<div className="flex justify-center items-center pb-3">
										<img
											src="https://cdn.easyfrontend.com/pictures/testimonial/testimonial_square_1.jpeg"
											alt=""
											className="rounded-full border-0"
											width="100"
											height="100"
										/>
									</div>
									<h2 className="font-bold text-3xl leading-6 text-center p-2 mt-4 mb-2">
										Log In
									</h2>

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



Sign In Form #14Login section with round user image

Available resources

Share with

Tags

You may also like