Structure

gistfile1.txt

import React from "react";
import "./login.css";

const Login = () => {
  return (
    <div className="container-fluid">
      <div className="row min-vh-100 main-container">
        <div className="col-12 col-md-7 p-5 su_bg d-flex flex-column justify-content-between">
          <div>SearchUnify</div>
          <div>
            <div>
              <p>
                After implementing SearchUnify, the quality of support improved
                significantly as our support heroes could access relevant
                information.
              </p>
            </div>
          </div>
        </div>
        <div className="col-12 col-md-5 d-flex flex-column align-items-center justify-content-between px-5">
          <div className="my-auto">
            <h1>Welcome to SearchUnify!</h1>
            <p className="mb-5">Please enter your credentials to sign in.</p>

            <form className="d-flex flex-column gap-3">
              <div className="form-group">
                <label className="mb-2" htmlFor="exampleInputEmail1">
                  Email
                </label>
                <input
                  type="email"
                  className="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                  placeholder="Enter email"
                />
              </div>
              <div className="form-group">
                <label className="mb-2" htmlFor="exampleInputEmail1">
                  Password
                </label>
                <input
                  type="password"
                  className="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                  placeholder="Enter email"
                />
              </div>
              <p className="text-end">Forget Password?</p>
              <button type="submit" className="btn w-100 btn-primary mt-3">
                Submit
              </button>
              <p className="text-center mt-3">
                Don't have account? Try SearchUnify for free{" "}
              </p>
            </form>
          </div>

          <div>
            <p className="footer-text text-center mb-4">
              Sitemap. Privacy. Terms and Conditions © 2018 SearchUnify. All
              Rights Reserved.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Login;