Product Incentives with description and 3 icon cards

User login form with social login

Login section with rounded user image and image background

HTML

<section class="ezy__signin16 d-flex align-items-center justify-content-center">
  <div class="ezy__signin16-overlay"></div>
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-12 col-md-6 col-lg-4">
        <div>
          <img
            src="https://cdn.easyfrontend.com/pictures/icons/user.png"
            alt=""
            class="ezy__signin16-user-img img-fluid mb-4"
          />
          <h2 class="ezy__signin16-heading mb-5">Unknown</h2>
          <form>
            <div class="ezy__signin16-form-card">
              <div class="form-group w-100 mb-3">
                <input type="text" class="form-control" id="name" placeholder="Username" />
              </div>
              <div class="form-group w-100 mb-3">
                <input type="password" class="form-control" id="password" placeholder="Password" />
              </div>

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

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

<style>
.ezy__signin16 {
        /* 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: url(https://cdn.easyfrontend.com/pictures/background/background3.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #fff;
        padding: 120px 0;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

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

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

      .ezy__signin16-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, #005bea, #00c6fb);
        opacity: 0.8;
        z-index: -1;
      }

      .ezy__signin16-user-img {
        width: 100px;
        height: auto;
      }
      /* form */

      .ezy__signin16 .form-control {
        min-height: 48px;
        line-height: 45px;
        background-color: #fff;
        color: rgba(22, 22, 22, 0.75);
        border: 0;
        border-radius: 100px;
        padding: 0 25px;
        font-weight: 700;
      }
      .ezy__signin16 .form-control::placeholder {
        font-size: 16px;
        font-weight: 700;
      }
      .ezy__signin16 .form-control:focus {
        border-color: var(--ezy-theme-color);
      }
      /* btn */
      .ezy__signin16-btn {
        height: 48px;
        padding: 10px 30px;
        font-weight: 600;
        font-size: 16;
        line-height: 1.4;
        background-color: var(--ezy-theme-color);
        color: #ffffff;
        border-radius: 100px;
      }

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

Bootstrap

<section
  class="ezy__signin16 flex items-center justify-center bg-cover bg-center bg-no-repeat text-white relative overflow-hidden z-[1] py-28 lg:py-48"
  style="background-image: url(https://cdn.easyfrontend.com/pictures/background/background3.jpg)"
>
  <div
    class="absolute top-0 right-0 left-0 bottom-0 opacity-80 -z-[1]"
    style="background: linear-gradient(to bottom, #005bea, #00c6fb)"
  ></div>
  <div class="container px-4 mx-auto">
    <div class="flex justify-center items-center">
      <div class="w-full md:w-5/12 lg:w-1/4 text-center">
        <img src="https://cdn.easyfrontend.com/pictures/icons/user.png" alt="" class="w-24 h-auto mb-6 mx-auto" />
        <h2 class="text-3xl font-light leading-none mb-12">Unknown</h2>
        <form>
          <div>
            <div class="w-full mb-4">
              <input
                type="text"
                class="w-full min-h-[48px] leading-10 bg-white rounded-full px-6 font-bold focus:outline-none border-2 border-transparent focus:border-blue-600 duration-300"
                id="name"
                placeholder="Username"
              />
            </div>
            <div class="w-full mb-4">
              <input
                type="password"
                class="w-full min-h-[48px] leading-10 bg-white rounded-full px-6 font-bold focus:outline-none border-2 border-transparent focus:border-blue-600 duration-300"
                id="password"
                placeholder="Password"
              />
            </div>

            <button
              type="submit"
              class="h-12 py-3 px-7 font-semibold text-white rounded-full bg-blue-600 hover:bg-opacity-90 duration-300 w-full"
            >
              SIGN IN
            </button>
          </div>

          <div class="text-center mt-6 text-lg duration-300 hover:text-blue-600">
            <a href="">Forget Username / Password ?</a>
          </div>
        </form>
      </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>
				<div className="w-full mb-4">
					<input
						type="text"
						className="w-full min-h-[48px] leading-10 bg-white rounded-full px-6 font-bold focus:outline-none border-2 border-transparent focus:border-blue-600 duration-300"
						id="name"
						placeholder="Username"
					/>
				</div>
				<div className="w-full mb-4">
					<input
						type="password"
						className="w-full min-h-[48px] leading-10 bg-white rounded-full px-6 font-bold focus:outline-none border-2 border-transparent focus:border-blue-600 duration-300"
						id="password"
						placeholder="Password"
					/>
				</div>

				<button
					type="submit"
					className="h-12 py-3 px-7 font-semibold text-white rounded-full bg-blue-600 hover:bg-opacity-90 duration-300 w-full"
				>
					SIGN IN
				</button>
			</div>

			<div className="text-center mt-6 text-lg duration-300 hover:text-blue-600">
				<a href="#!">Forget Username / Password ?</a>
			</div>
		</form>
	);
};

const SignIn16 = () => {
	return (
		<section
			className="ezy__signin16 flex items-center justify-center bg-cover bg-center bg-no-repeat text-white relative overflow-hidden z-[1] py-28 lg:py-48"
			style={{
				backgroundImage:
					"url(https://cdn.easyfrontend.com/pictures/background/background3.jpg)",
			}}
		>
			<div
				className="absolute top-0 right-0 left-0 bottom-0 opacity-80 -z-[1]"
				style={{ background: "linear-gradient(to bottom, #005bea, #00c6fb)" }}
			/>
			<div className="container px-4 mx-auto">
				<div className="flex justify-center items-center">
					<div className="w-full md:w-5/12 lg:w-1/4 text-center">
						<img
							src="https://cdn.easyfrontend.com/pictures/icons/user.png"
							alt=""
							className="w-24 h-auto mb-6 mx-auto"
						/>
						<h2 className="text-3xl font-light leading-none mb-12">Unknown</h2>
						<SignInForm />
					</div>
				</div>
			</div>
		</section>
	);
};



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

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

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

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

const SignIn16 = () => {
	return (
		<section className="ezy__signin16 d-flex align-items-center justify-content-center">
			<div className="ezy__signin16-overlay" />
			<Container>
				<Row className="justify-content-center text-center">
					<Col xs={12} md={6} lg={4}>
						<div>
							<img
								src="https://cdn.easyfrontend.com/pictures/icons/user.png"
								alt=""
								className="ezy__signin16-user-img img-fluid mx-auto mb-4"
							/>
							<h2 className="ezy__signin16-heading mb-5">Unknown</h2>

							<SignInForm />
						</div>
					</Col>
				</Row>
			</Container>
		</section>
	);
};

<style>
.ezy__signin16 {
	/* 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: url(https://cdn.easyfrontend.com/pictures/background/background3.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	padding: 120px 0;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

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

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

.ezy__signin16-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, #005bea, #00c6fb);
	opacity: 0.8;
	z-index: -1;
}

.ezy__signin16-user-img {
	width: 100px;
	height: auto;
}
/* form */

.ezy__signin16 .form-control {
	min-height: 48px;
	line-height: 45px;
	background-color: #fff;
	color: rgba(22, 22, 22, 0.75);
	border: 0;
	border-radius: 100px;
	padding: 0 25px;
	font-weight: 700;
}
.ezy__signin16 .form-control::placeholder {
	font-size: 16px;
	font-weight: 700;
}
.ezy__signin16 .form-control:focus {
	border-color: var(--ezy-theme-color);
}
/* btn */
.ezy__signin16-btn {
	height: 48px;
	padding: 10px 30px;
	font-weight: 600;
	font-size: 16;
	line-height: 1.4;
	background-color: var(--ezy-theme-color);
	color: #ffffff;
	border-radius: 100px;
}

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

Sign In Form #16Login section with rounded user image and image background

Available resources

Share with

Tags

You may also like