Login section with rounded user image and image background

User login form with social login

HTML

<section class="ezy__signin15 d-flex align-items-center justify-content-center">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-12 col-md-6 col-lg-5">
        <div>
          <h2 class="ezy__signin15-heading mb-5">ACCOUNT LOGIN</h2>
          <form>
            <div class="ezy__signin15-form-card">
              <div class="d-flex w-100">
                <div class="form-group w-50">
                  <input type="text" class="form-control" id="name" placeholder="Username" />
                </div>
                <div class="form-group w-50">
                  <input type="password" class="form-control" id="password" placeholder="Password" />
                </div>
              </div>

              <button type="submit" class="btn ezy__signin15-btn w-100">SIGN IN</button>
            </div>

            <div class="text-center mt-4">
              <a href="">Forget Password ?</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
.ezy__signin15 {
  /* 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;

  background-image: linear-gradient(to right, #2575fc, #6a11cb);
  color: #fff;
  padding: 120px 0;
}

@media (min-width: 991px) {
  .ezy__signin15 {
    padding: 200px 0;
  }
}

.ezy__signin15-heading {
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
}

/* form */
.ezy__signin15-form-card {
  border-radius: 10px;
  overflow: hidden;
}
.ezy__signin15 .form-control {
  min-height: 65px;
  line-height: 40px;
  background-color: #fff;
  color: var(--bs-body-color);
  border-radius: 0;
}
.ezy__signin15 .form-control::placeholder {
  font-size: 16px;
  font-weight: 700;
  padding-left: 10px;
}
.ezy__signin15 .form-control:focus {
  font-weight: 700;
  color: rgba(22, 22, 22, 0.75);
  border-color: var(--ezy-theme-color);
}
/* btn */
.ezy__signin15-btn {
  height: 65px;
  padding: 10px 30px;
  font-weight: 600;
  font-size: 16;
  line-height: 1;
  background-color: var(--ezy-theme-color);
  color: #ffffff;
  border-radius: 0;
}

.ezy__signin15-btn:hover {
  color: #ffffff;
  background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
}
.ezy__signin15 a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}
</style>

Bootstrap

<section
  class="ezy__signin15 flex items-center justify-center py-24 md:py-48 text-white"
  style="background-image: linear-gradient(to right, #2575fc, #6a11cb)"
>
  <div class="container px-4 mx-auto">
    <div class="flex justify-center text-center">
      <div class="w-full md:w-5/12 lg:w-2/5">
        <div>
          <h2 class="text-3xl leading-none font-light mb-12">ACCOUNT LOGIN</h2>
          <form>
            <div class="rounded-xl overflow-hidden">
              <div class="flex w-full">
                <div class="w-1/2">
                  <input
                    type="text"
                    class="min-h-[65px] leading-10 bg-white rounded-none border-2 border-transparent border-r-2 border-r-gray-300 placeholder:font-bold placeholder:pl-4 focus:font-bold focus:border-blue-600 focus:outline-none w-full"
                    id="name"
                    placeholder="Username"
                  />
                </div>
                <div class="w-1/2">
                  <input
                    type="password"
                    class="min-h-[65px] leading-10 bg-white rounded-none border-2 border-transparent placeholder:font-bold placeholder:pl-4 focus:font-bold focus:border-blue-600 focus:outline-none w-full"
                    id="password"
                    placeholder="Password"
                  />
                </div>
              </div>

              <button type="submit" class="h-16 px-7 py-3 font-semibold leading-none text-white bg-blue-600 w-full">
                SIGN IN
              </button>
            </div>

            <div class="text-center text-sm mt-6">
              <a href="">Forget Password ?</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>



Tailwind CSS

React JS

import React, { useState } from "react";

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="rounded-xl overflow-hidden">
				<div className="flex w-full">
					<div className="w-1/2">
						<input
							type="text"
							className="min-h-[65px] leading-10 bg-white rounded-none border-2 border-transparent border-r-2 border-r-gray-300 placeholder:font-bold placeholder:pl-4 focus:font-bold focus:border-blue-600 focus:outline-none w-full"
							id="name"
							placeholder="Username"
						/>
					</div>
					<div className="w-1/2">
						<input
							type="password"
							className="min-h-[65px] leading-10 bg-white rounded-none border-2 border-transparent placeholder:font-bold placeholder:pl-4 focus:font-bold focus:border-blue-600 focus:outline-none w-full"
							id="password"
							placeholder="Password"
						/>
					</div>
				</div>

				<button
					type="submit"
					className="h-16 px-7 py-3 font-semibold leading-none text-white bg-blue-600 w-full"
				>
					SIGN IN
				</button>
			</div>

			<div className="text-center text-sm mt-6">
				<a href="#!">Forget Password ?</a>
			</div>
		</form>
	);
};

const SignIn15 = () => {
	return (
		<section
			className="ezy__signin15 flex items-center justify-center py-24 md:py-48 text-white"
			style={{ backgroundImage: "linear-gradient(to right, #2575fc, #6a11cb)" }}
		>
			<div className="container px-4 mx-auto">
				<div className="flex justify-center text-center">
					<div className="w-full md:w-5/12 lg:w-2/5">
						<div>
							<h2 className="text-3xl leading-none font-light mb-12">
								ACCOUNT LOGIN
							</h2>
							<SignInForm />
						</div>
					</div>
				</div>
			</div>
		</section>
	);
};



import React from "react";
import { Button, Col, Container, Form, Row } from "react-bootstrap";

const SignInForm = () => (
	<Form>
		<div className="ezy__signin15-form-card">
			<div className="d-flex w-100">
				<Form.Group className="w-50">
					<input
						type="text"
						className="form-control"
						id="name"
						placeholder="Username"
					/>
				</Form.Group>
				<Form.Group className="w-50">
					<input
						type="password"
						className="form-control"
						id="password"
						placeholder="Password"
					/>
				</Form.Group>
			</div>

			<Button variant="" type="submit" className="ezy__signin15-btn w-100">
				SIGN IN
			</Button>
		</div>

		<div className="text-center mt-4">
			<a href="#!">Forget Password ?</a>
		</div>
	</Form>
);

const SignIn15 = () => {
	return (
		<section className="ezy__signin15 d-flex align-items-center justify-content-center">
			<Container>
				<Row className="justify-content-center text-center">
					<Col xs={12} md={6} lg={5}>
						<div>
							<h2 className="ezy__signin15-heading mb-5">ACCOUNT LOGIN</h2>
							<SignInForm />
						</div>
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__signin15 {
	/* 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;

	background-image: linear-gradient(to right, #2575fc, #6a11cb);
	color: #fff;
	padding: 120px 0;
}

@media (min-width: 991px) {
	.ezy__signin15 {
		padding: 200px 0;
	}
}

.ezy__signin15-heading {
	font-weight: 300;
	font-size: 32px;
	line-height: 1;
}

/* form */
.ezy__signin15-form-card {
	border-radius: 10px;
	overflow: hidden;
}
.ezy__signin15 .form-control {
	min-height: 65px;
	line-height: 40px;
	background-color: #fff;
	color: var(--bs-body-color);
	border-radius: 0;
}
.ezy__signin15 .form-control::placeholder {
	font-size: 16px;
	font-weight: 700;
	padding-left: 10px;
}
.ezy__signin15 .form-control:focus {
	font-weight: 700;
	color: rgba(22, 22, 22, 0.75);
	border-color: var(--ezy-theme-color);
}
/* btn */
.ezy__signin15-btn {
	height: 65px;
	padding: 10px 30px;
	font-weight: 600;
	font-size: 16;
	line-height: 1;
	background-color: var(--ezy-theme-color);
	color: #ffffff;
	border-radius: 0;
}

.ezy__signin15-btn:hover {
	color: #ffffff;
	background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
}
.ezy__signin15 a {
	text-decoration: none;
	color: #fff;
	font-size: 14px;
}
</style>

Sign In Form #15Login section with gradient background

Available resources

Share with

Tags

You may also like