Custom Pages

Full amazing page templates to cut your work in half.

Hero

hero

import React from "react";
import { CDBNavbar, CDBIcon, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from "cdbreact";
export const Hero = () => {
  const [collapse, setCollapse] = useState(false);
    return(
        <div className="hero">
            <header className="navigation">
        <CDBNavbar className="px-0 bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
          </CDBNavBrand>
          <CDBNavToggle
            onClick={() => {
              setCollapse(!collapse);
            }}
          />
          <CDBCollapse id="navbarCollapse1" isOpen={collapse} navbar>
            <CDBNavbarNav left>
              <CDBNavItem active>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Home</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Resources</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Blog</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Contact</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Support</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
            </CDBNavbarNav>
            <CDBNavbarNav right>
              <CDBNavItem active>
                <CDBBtn flat outline style={{width:"120px"}} className="py-1 m-0 border-dark bg-transparent">
                  <CDBNavLink to="#">Sign In</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
            </CDBNavbarNav>
          </CDBCollapse>
        </CDBNavbar>
      </header>
        <div className="page-body">
                <div className="page-info">
                    <CDBCardTitle className="h1 font-weight-bold" style={{maxWidth:"350px"}}>Creativity is but skin deep</CDBCardTitle>
                    <CDBCardText className="my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>
                    <CDBBtn flat style={{background:"#8080ff", border:"2px #8080ff solid"}}>Start Now</CDBBtn>
                </div>
                <div className="image-container">
                    <img alt="sideImage" className="image" src="/img/pages/heroImage3.png" />
                    <div className="btn-container">
                        <CDBBtn color="dark" className="mr-1"><CDBIcon fas icon="arrow-left"/></CDBBtn>
                        <CDBBtn color="dark"><CDBIcon fas icon="arrow-right"/></CDBBtn>
                    </div>
                </div>
            </div>
        </div>
    );
}

Hero 2

Pro Component

hero

Live Preview

import React from "react";
import { CDBNavbar, CDBIcon, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from "cdbreact";
export const Hero2 = () => {
  const [collapse, setCollapse] = useState(false);
    return(
        <div className="hero2">
            <div className="position-relative">
                <img alt="Background" src="/img/pages/hero.png" className="image"/>
                <CDBMask overlay="darkLight"/>
                <div className="scroll-down">
                    <CDBIcon fas icon="angle-double-down"/>
                    <span className="ml-2">scroll down</span>
                </div>
            </div>
            <div className="page-body">
        <header className="navigation">
          <CDBNavbar className="bg-transparent px-0" expand="md" dark scrolling>
            <CDBNavBrand href="/">
              <img alt="logo" src="/img/pages/logo.png" width="25px"/>
            </CDBNavBrand>
            <CDBNavToggle
              onClick={() => {
                setCollapse(!collapse);
              }}
            />
            <CDBCollapse id="navbarCollapse1" delay={0} isOpen={collapse} navbar>
              <CDBNavbarNav left>
                <CDBNavItem active>
                  <CDBBtn flat className="p-3 border-0 bg-transparent">
                    <CDBNavLink to="#">Home</CDBNavLink>
                  </CDBBtn>
                </CDBNavItem>
                <CDBNavItem>
                  <CDBBtn flat className="p-3 border-0 bg-transparent">
                    <CDBNavLink to="#">Resources</CDBNavLink>
                  </CDBBtn>
                </CDBNavItem>
                <CDBNavItem>
                  <CDBBtn flat className="p-3 border-0 bg-transparent">
                    <CDBNavLink to="#">Blog</CDBNavLink>
                  </CDBBtn>
                </CDBNavItem>
                <CDBNavItem>
                  <CDBBtn flat className="p-3 border-0 bg-transparent">
                    <CDBNavLink to="#">About</CDBNavLink>
                  </CDBBtn>
                </CDBNavItem>
                <CDBNavItem>
                  <CDBBtn flat className="p-3 border-0 bg-transparent">
                    <CDBNavLink to="#">Contact</CDBNavLink>
                  </CDBBtn>
                </CDBNavItem>
                <CDBNavItem>
                  <CDBBtn flat className="p-3 border-0 bg-transparent">
                    <CDBNavLink to="#">Support</CDBNavLink>
                  </CDBBtn>
                </CDBNavItem>
              </CDBNavbarNav>
            </CDBCollapse>
          </CDBNavbar>
        </header>
                <div className="page-info">
                    <CDBCardTitle className="h1 font-weight-bold" style={{maxWidth:"350px"}}>Creativity is but skin deep</CDBCardTitle>
                    <CDBCardText className="my-5" style={{maxWidth:"500px"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>
                    <div className="d-flex">
                        <CDBBtn flat className="mr-4" style={{background:"#8080ff", border:"2px #8080ff solid"}}>Start Now</CDBBtn>
                        <CDBBtn flat className="border-white bg-transparent text-white">Start Now</CDBBtn>
                    </div>
                </div>
            </div>
        </div>
    );
}

Hero 3

Pro Component

hero

Live Preview

import React from "react";
import { CDBNavbar, CDBCollapse, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from "cdbreact";
export const Hero3 = () => {
  const [collapse, setCollapse] = useState(false);
    return(
        <div className="hero3">
            <header className="navigation">
        <CDBNavbar className="px-0 bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
          </CDBNavBrand>
          <CDBNavToggle
            onClick={() => {
              setCollapse(!collapse);
            }}
          />
          <CDBCollapse id="navbarCollapse1" isOpen={collapse} navbar>
            <CDBNavbarNav left>
              <CDBNavItem active>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Home</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Resources</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Blog</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Contact</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Support</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
            </CDBNavbarNav>
            <CDBNavbarNav right>
              <CDBNavItem active>
                <CDBBtn flat outline style={{width:"120px"}} className="py-1 m-2 border-dark bg-transparent">
                  <CDBNavLink to="#">Sign In</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
            </CDBNavbarNav>
          </CDBCollapse>
        </CDBNavbar>
      </header>
      <div className="page-body">
                <div className="page-info">
                    <CDBCardTitle className="h1 big">Creativity is but skin deep</CDBCardTitle>
                    <CDBCardText className="my-4" style={{maxWidth:"500px"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>
                    <CDBBtn flat style={{background:"#8080ff", border:"2px #8080ff solid"}}>Start Now</CDBBtn>
                </div>
                <div className="image-container">
                    <img alt="sideImage" src="/img/pages/heroImage2.png" className="image1"/>
                    <img alt="sideImage" className="image2" src="/img/pages/heroImage.png" />
                </div>
            </div>
            <div className="scroll-down">
                <CDBIcon fas icon="angle-double-down"/>
                <span className="ml-2">scroll down</span>
            </div>
        </div>
    );
}

Hero 4

Pro Component

hero

Live Preview

import React from "react";
import { CDBNavbar, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from "cdbreact";
export const Hero4 = () => {
  const [collapse, setCollapse] = useState(false);
    return(
        <div className="hero4">
            <header className="navigation">
        <CDBNavbar className="px-0 bg-transparent" light expand="md" scrolling>
          <CDBNavBrand className="navbar-expand-md mx-auto" href="/">
            <img alt="logo" src="/img/pages/logo.png" width="25px" className="navbar-toggler p-0 border-0" />
          </CDBNavBrand>
          <CDBNavToggle
            onClick={() => {
              setCollapse(!collapse);
            }}
          />
          <CDBCollapse id="navbarCollapse1" isOpen={collapse} navbar>
            <ul className="navbar-nav mx-auto">
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Resources</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Blog</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
                <CDBNavBrand href="/" className="my-auto mx-0 px-4 inner-logo">
                  <img alt="logo" src="/img/pages/logo.png" width="25px"/>
                </CDBNavBrand>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Contact</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
              <CDBNavItem>
                <CDBBtn flat className="p-3 border-0 bg-transparent">
                  <CDBNavLink to="#">Support</CDBNavLink>
                </CDBBtn>
              </CDBNavItem>
            </ul>
          </CDBCollapse>
        </CDBNavbar>
      </header>
            <div className="page-body">
                <CDBCardTitle className="h1 font-weight-bold">Introducing Contrast UI Kit</CDBCardTitle>
                <CDBCardText className="my-4 mx-auto" style={{maxWidth:"550px"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>
                <CDBBtn flat className="m-auto" style={{background:"#8080ff", border:"2px #8080ff solid"}}>Explore</CDBBtn>
                <CDBIcon fas className="d-block mt-4" icon="angle-double-down"/>
                <img alt="sideImage" src="/img/pages/promotionImage.png" className="image"/>
            </div>
        </div>
    );
}

Hero 5

Pro Component

hero

Live Preview

import React from "react";
import { CDBNavbar, CDBCardTitle, CDBCardText, CDBBtn, CDBNavLink, CDBNavItem, CDBCollapse, CDBNavBrand, CDBNavbarNav, CDBNavToggle, } from "cdbreact";
export const Hero5 = () => {
  const [collapse, setCollapse] = useState(false);
    return(
        <div className="hero5">
            <div style={{position:"relative"}}>
                <img alt="Background" src="/img/pages/hero1.png" style={{width:"100%", height:"100vh", objectFit:"cover"}}/>
                <CDBMask overlay="darkLight"/>
            </div>
            <div className="page-body">
        <div style={{maxWidth:"1320px", margin:"0 auto"}}>
                <header className="page-header">
            <CDBNavbar className="navigation bg-transparent p-0" expand="md" dark scrolling>
              <CDBNavBrand href="/">
                <img alt="logo" src="/img/pages/logo.png" width="25px"/>
              </CDBNavBrand>
              <CDBNavToggle
                onClick={() => {
                  setCollapse(!collapse);
                }}
              />
              <CDBCollapse id="navbarCollapse1" delay={0} isOpen={collapse} navbar>
                <CDBNavbarNav left>
                  <CDBNavItem active>
                    <CDBBtn flat className="py-3 border-0 bg-transparent">
                      <CDBNavLink to="#">Home</CDBNavLink>
                    </CDBBtn>
                  </CDBNavItem>
                  <CDBNavItem>
                    <CDBBtn flat className="py-3 border-0 bg-transparent">
                      <CDBNavLink to="#">Resources</CDBNavLink>
                    </CDBBtn>
                  </CDBNavItem>
                  <CDBNavItem>
                    <CDBBtn flat className="py-3 border-0 bg-transparent">
                      <CDBNavLink to="#">Blog</CDBNavLink>
                    </CDBBtn>
                  </CDBNavItem>
                  <CDBNavItem>
                    <CDBBtn flat className="py-3 border-0 bg-transparent">
                      <CDBNavLink to="#">Contact</CDBNavLink>
                    </CDBBtn>
                  </CDBNavItem>
                  <CDBNavItem>
                    <CDBBtn flat className="py-3 border-0 bg-transparent">
                      <CDBNavLink to="#">Support</CDBNavLink>
                    </CDBBtn>
                  </CDBNavItem>
                </CDBNavbarNav>
                <CDBNavbarNav right>
                  <CDBNavItem>
                    <CDBBtn flat className="py-3 border-0 bg-transparent">
                      <CDBNavLink to="#">Sign In</CDBNavLink>
                    </CDBBtn>
                  </CDBNavItem>
                  <CDBNavItem>
                    <CDBBtn flat outline style={{width:"120px"}} className="my-2 py-1 border-white bg-transparent">
                      <CDBNavLink to="#">Sign Up</CDBNavLink>
                    </CDBBtn>
                  </CDBNavItem>
                </CDBNavbarNav>
              </CDBCollapse>
            </CDBNavbar>
          </header>
          <div className="text-white text-center" style={{width:"80%", margin:"12rem auto 0 auto"}}>
                    <CDBCardTitle className="h1 font-weight-bold mx-auto">Introducing the innovating, captivating art gallery.</CDBCardTitle>
                    <CDBCardText className="my-5 mx-auto" style={{maxWidth:"70%"}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</CDBCardText>
                    <CDBBtn flat className="px-4" style={{background:"#8080ff", border:"#8080ff"}}>Explore</CDBBtn>
                    <CDBIcon fas className="d-block mt-3" icon="angle-double-down"/>
                </div>
        </div>
      </div>
        </div>
    );
}

Forms

Create Account

Pro Component

hero

Live Preview

import React from "react";
import { CDBLink, CDBIcon, CDBCard, CDBBtn, CDBInput, CDBCardBody, CDBNavbar, CDBNavBrand, CDBContainer } from "cdbreact";
export const CreateAccount = () => {
    return(
        <CDBContainer>
      <CDBNavbar className="px-0 mx-auto bg-transparent" style={{width:"80%"}} light expand="md" scrolling>
        <CDBNavBrand href="/" className="d-flex align-items-center">
          <img alt="logo" src="/img/pages/logo.png" width="25px"/>
          <span className="ml-3 h4 my-0 font-weight-bold">Devwares</span>
        </CDBNavBrand>
      </CDBNavbar>
            <div className="d-flex align-items-center justify-content-center">
        <CDBCard style={{width:"80%", maxWidth:"375px"}} className="border-0">
          <CDBCardBody className="my-3 p-0 mx-auto">
            <div className="mt-4 mb-5">
              <p className="h4 text-center font-weight-bold">Create Account</p>
            </div>
            <div className="d-flex my-3">
              <CDBBtn color="primary" style={{width:"80%"}} className="mr-1" >
                <CDBIcon className="float-left mt-1" fab icon="facebook-f"/>
                Continue with facebook
              </CDBBtn>
              <CDBBtn color="info">
                <CDBIcon fab icon="twitter"/>
              </CDBBtn>
            </div>
            <div className="d-flex align-items-center mb-3">
              <span style={{border:"0.5px solid black", width:"45%"}}/>
              <span className="text-center" style={{width:"10%"}}>OR</span>
              <span style={{border:"0.5px solid black", width:"45%"}}/>
            </div>
            <div style={{minWidth:"250px"}}>
              <label htmlFor="defaultRegisterUsername" className="text-muted m-0">
                Username
              </label>
              <CDBInput id="defaultRegisterUsername" className="mt-n3" background hint="Username" type="text" />
              <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
                Password
              </label>
              <CDBInput id="defaultRegisterPassword" className="mt-n3" background hint="Password" type="password"/>
            </div>
            <CDBBtn
              color="dark"
              className="btn-block w-100 mt-5">
                Sign up
            </CDBBtn>
            <p className="text-muted mt-4 text-center">By clicking sign up you agree to the Contrast<CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#"> terms and conditions</CDBLink></p>
            <p className="text-muted text-center my-5">Have an Account? <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign in</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </CDBContainer>
    );
}

Forgot Password

Pro Component

hero

Live Preview

import React from 'react';
import {
  CDBLink,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand } from "cdbreact";
export const ForgotPassword = () => {
    return(
        <div className="forgotPassword">
            <div className="position-relative">
        <img alt="Background" src="/img/pages/signIn.png" style={{position:"absolute", width:"100%", height:"100vh"}}/>
      </div>
      <div className="body">
        <CDBNavbar className="navigation bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/" className="d-flex align-items-center">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
            <span className="ml-3 h5 my-0 font-weight-bold">Devwares</span>
          </CDBNavBrand>
        </CDBNavbar>
        <CDBCard className="form">
          <CDBCardBody className="form-body">
            <div className="mt-4 mb-5">
              <p className="h4 font-weight-bold">Forgot Password</p>
            </div>
            <label htmlFor="defaultRegisterEmail" className="text-muted m-0">
              Email Address
            </label>
            <CDBInput id="defaultRegisterEmail" hint="Email Address" className="mt-n3" background type="email" />
            <CDBBtn
              color="dark"
              className="btn-block w-100 mb-3 mt-5" >
                Recover Password
            </CDBBtn>
            <p className="text-muted text-center">Return to <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign in</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </div>
    );
}

Forgot Password 2

Pro Component

hero

Live Preview

import React from 'react';
import {
  CDBLink,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand,
  CDBContainer } from "cdbreact";
export const ForgotPassword2 = () => {
    return(
        <Container>
            <CDBNavbar className="px-0 mx-auto bg-transparent" style={{width:"80%"}} light expand="md" scrolling>
        <CDBNavBrand href="/" className="d-flex align-items-center">
          <img alt="logo" src="/img/pages/logo.png" width="25px"/>
          <span className="ml-3 h4 my-0 font-weight-bold">Devwares</span>
        </CDBNavBrand>
      </CDBNavbar>
      <div className="d-flex align-items-center justify-content-center">
        <CDBCard style={{width:"80%", maxWidth:"375px", height:"70vh"}} className="border-0">
          <CDBCardBody className="m-3 d-flex flex-column p-0">
            <div className="mt-4 mb-5">
              <p className="h4 text-center font-weight-bold">Forgot Password</p>
            </div>
            <label htmlFor="defaultRegisterEmail" className="text-muted m-0">
              Email Address
            </label>
            <CDBInput id="defaultRegisterEmail" hint="Email Address" className="mt-n3" background type="email" />
            <CDBBtn
              color="dark"
              className="btn-block w-100 mb-3 mt-2">
                Recover Password
            </CDBBtn>
            <p className="text-muted text-center mt-auto">Return to <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign in</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </Container>
    );
}

Forgot Password Popup

Pro Component

hero

Live Preview

import React, { useState } from 'react';
import { CDBLink,
  CDBIcon,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand,
  CDBModal } from "cdbreact";
export const ForgotPasswordPopUp = () => {
  const [modal, setModal] = useState(true);
  const toggle = () => {
    setModal(!modal);
  };
    return(
        <div className="forgotPasswordPopUp">
            <div className="position-relative">
        <img alt="Background" src="/img/pages/signIn.png" className="image"/>
      </div>
      <div className="body">
        <CDBNavbar className="navigation bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/" className="d-flex align-items-center">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
            <span className="ml-3 h4 my-0 font-weight-bold">Devwares</span>
          </CDBNavBrand>
        </CDBNavbar>
        <CDBCard className="shadow-lg form">
          <CDBCardBody className="mx-5 py-5 px-0">
            <div className="mt-4 mb-5">
              <p className="h4 font-weight-bold">Sign in</p>
            </div>
            <label htmlFor="defaultRegisterUsername" className="text-muted m-0">
              Username
            </label>
            <CDBInput id="defaultRegisterUsername" background hint="Username" className="mt-n3" type="text" />
            <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
              Password
            </label>
            <CDBInput id="defaultRegisterPassword" background hint="Password" className="mt-n3" type="password"/>
            <CDBLink onClick={toggle} style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">
              Forgot Password?
            </CDBLink>
            <CDBModal isOpen={modal} toggle={toggle} centered fade>
              <CDBCard>
                <CDBBtn color="none" flat onClick={toggle} className="ml-auto border-0 mt-2 mr-2"><CDBIcon fas icon="times"/></CDBBtn>
                <CDBCardBody className="w-75 mx-auto modal-card">
                  <div className="mt-4 mb-5">
                    <p className="h3 font-weight-bold">Forgot Password</p>
                  </div>
                  <label htmlFor="defaultRegisterEmail" className="text-muted m-0">
                    Email Address
                  </label>
                  <CDBInput id="defaultRegisterEmail" hint="Email Address" className="mt-n3" background type="email" />
                  <CDBBtn
                    color="dark"
                    className="btn-block w-100 mb-3 mt-5" >
                      Recover Password
                  </CDBBtn>
                  <p className="text-muted text-center">
                    Return to
                    <CDBLink style={{fontWeight:"600"}} onClick={toggle} className="d-inline ml-2 p-0 text-dark" to="#">
                      Sign in
                    </CDBLink>
                  </p>
                </CDBCardBody>
              </CDBCard>
            </CDBModal>
            <CDBBtn
              color="dark"
              className="btn-block w-100 mb-3 mt-5" >
                Sign in
            </CDBBtn>
            <div className="d-flex align-items-center">
              <span style={{border:"0.5px solid black", width:"45%"}}/>
              <span className="text-center" style={{width:"10%"}}>OR</span>
              <span style={{border:"0.5px solid black", width:"45%"}}/>
            </div>
            <div className="row my-3 d-flex justify-content-center">
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="facebook-f" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                color="dark"
                flat
                className="mx-2"
              >
                <CDBIcon fab icon="twitter" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="google-plus-g"/>
              </CDBBtn>
            </div>
            <p className="text-muted text-center">Don't have an Account? <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign Up</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </div>
    );
}

Pro Component

hero

Live Preview

import React from 'react';
import {
  CDBLink,
  CDBIcon,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand } from "cdbreact";
export const SignIn = () => {
    return(
        <div className="signIn">
            <div className="position-relative">
        <img alt="Background" src="/img/pages/signIn.png" className="image"/>
      </div>
      <div className="body">
        <CDBNavbar className="navigation bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/" className="d-flex align-items-center">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
            <span className="ml-3 h4 my-0 font-weight-bold">Devwares</span>
          </CDBNavBrand>
        </CDBNavbar>
        <CDBCard className="shadow-lg form">
          <CDBCardBody className="mx-auto py-5 w-75" style={{minWidth:"280px"}}>
            <div className="mt-4 mb-5">
              <p className="h4 font-weight-bold">Sign in</p>
            </div>
            <label htmlFor="defaultRegisterUsername" className="text-muted m-0">
              Username
            </label>
            <CDBInput id="defaultRegisterUsername" background hint="Username" className="mt-n3" type="text" />
            <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
              Password
            </label>
            <CDBInput id="defaultRegisterPassword" background hint="Password" className="mt-n3" type="password"/>
            <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Forgot Password?</CDBLink>
            <CDBBtn
              color="dark"
              className="btn-block w-100 mb-3 mt-5" >
                Sign in
            </CDBBtn>
            <div className="d-flex align-items-center">
              <span style={{border:"0.5px solid black", width:"45%"}}/>
              <span className="text-center" style={{width:"10%"}}>OR</span>
              <span style={{border:"0.5px solid black", width:"45%"}}/>
            </div>
            <div className="row my-3 d-flex justify-content-center">
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="facebook-f" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                color="dark"
                flat
                className="mx-2"
              >
                <CDBIcon fab icon="twitter" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="google-plus-g"/>
              </CDBBtn>
            </div>
            <p className="text-muted text-center">Don't have an Account? <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign Up</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </div>
    );
}

Sign In 2

Pro Component

hero

Live Preview

import React from 'react';
import {
  CDBLink,
  CDBIcon,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand } from "cdbreact";
export const SignIn2 = () => {
    return(
        <div className="signIn2">
            <div className="position-relative">
        <img alt="Background" src="/img/pages/signIn.png" className="image"/>
      </div>
      <div className="body">
        <CDBNavbar className="navigation bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/" className="d-flex align-items-center">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
            <span className="ml-3 h5 my-0 font-weight-bold">Devwares</span>
          </CDBNavBrand>
        </CDBNavbar>
        <CDBCard className="form">
          <CDBCardBody className="form-body" style={{minWidth:"300px"}}>
            <div className="mt-4 mb-5">
              <p className="h3 font-weight-bold">Sign in</p>
            </div>
            <label htmlFor="defaultRegisterUsername" className="text-muted m-0">
              Username
            </label>
            <CDBInput id="defaultRegisterUsername" className="mt-n3" background hint="Username" type="text" />
            <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
              Password
            </label>
            <CDBInput id="defaultRegisterPassword" className="mt-n3" background hint="Password" type="password"/>
            <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Forgot Password?</CDBLink>
            <CDBBtn
              color="dark"
              className="btn-block w-100 mb-3 mt-5" >
                Sign in
            </CDBBtn>
            <div className="d-flex align-items-center">
              <span style={{border:"0.5px solid black", width:"45%"}}/>
              <span className="text-center" style={{width:"10%"}}>OR</span>
              <span style={{border:"0.5px solid black", width:"45%"}}/>
            </div>
            <div className="row my-3 d-flex justify-content-center">
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="facebook-f" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                color="dark"
                flat
                className="mx-2"
              >
                <CDBIcon fab icon="twitter" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="google-plus-g"/>
              </CDBBtn>
            </div>
            <p className="text-muted text-center">Don't have an Account? <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign Up</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </div>
    );
}

Sign In 3

Pro Component

hero

Live Preview

import React, { Fragment } from 'react';
import {
  CDBLink,
  CDBIcon,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand,
  CDBContainer } from "cdbreact";
export const SignIn3 = () => {
    return(
        <CDBContainer>
            <CDBNavbar className="px-0 mx-auto bg-transparent" style={{width:"80%"}} light expand="md" scrolling>
        <CDBNavBrand href="/" className="d-flex align-items-center">
          <img alt="logo" src="/img/pages/logo.png" width="25px"/>
          <span className="ml-3 h4 my-0 font-weight-bold">Devwares</span>
        </CDBNavBrand>
      </CDBNavbar>
      <div className="d-flex align-items-center justify-content-center">
        <CDBCard style={{width:"80%", maxWidth:"375px"}} className="border-0">
          <CDBCardBody className="my-3 mx-auto p-0">
            <div className="mt-4 mb-5">
              <p className="h4 text-center font-weight-bold">Sign In</p>
            </div>
            <div className="d-flex my-3">
              <CDBBtn color="primary" style={{width:"80%"}} className="mr-1">
                <CDBIcon className="float-left mt-1" fab icon="facebook-f"/>
                Continue with facebook
              </CDBBtn>
              <CDBBtn color="info" >
                <CDBIcon fab icon="twitter"/>
              </CDBBtn>
            </div>
            <div className="d-flex align-items-center mb-3">
              <span style={{border:"0.5px solid black", width:"45%"}}/>
              <span className="text-center" style={{width:"10%"}}>OR</span>
              <span style={{border:"0.5px solid black", width:"45%"}}/>
            </div>
            <label htmlFor="defaultRegisterUsername" className="text-muted m-0">
              Username
            </label>
            <CDBInput id="defaultRegisterUsername" className="mt-n3" background hint="Username" type="text" />
            <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
              Password
            </label>
            <CDBInput id="defaultRegisterPassword" className="mt-n3" background hint="Password" type="password"/>
            <CDBBtn
              color="dark"
              className="btn-block w-100 mt-5">
                Sign in
            </CDBBtn>
            <p className="text-muted text-center my-5">Don't have an Account? <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign in</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </CDBContainer>
    );
}

Pro Component

hero

Live Preview

import React from 'react';
import {
  CDBLink,
  CDBIcon,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand } from "cdbreact";
import "./SignUp.css"
export const SignUp = () => {
    return(
        <div className="signUp">
            <div className="position-relative">
        <img alt="Background" src="/img/pages/signIn.png" className="image"/>
      </div>
      <div className="body">
        <CDBNavbar className="navigation bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/" className="d-flex align-items-center">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
            <span className="ml-3 h4 my-0 font-weight-bold">Devwares</span>
          </CDBNavBrand>
        </CDBNavbar>
        <CDBCard className="shadow-lg form">
          <CDBCardBody className="mx-auto py-5 w-75" style={{minWidth:"250px"}}>
            <div className="mt-4 mb-5">
              <p className="h4 font-weight-bold">Sign up</p>
            </div>
            <label htmlFor="defaultRegisterUsername" className="text-muted m-0">
              Username
            </label>
            <CDBInput id="defaultRegisterUsername" background hint="Username" className="mt-n3" type="text" />
            <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
              Password
            </label>
            <CDBInput id="defaultRegisterPassword" background hint="Password" className="mt-n3" type="password"/>
            <CDBBtn
              color="dark"
              className="btn-block w-100 mb-3 mt-5" >
                Sign up
            </CDBBtn>
            <p className="text-muted text-center">By Clicking sign up, you agree to the Contrast <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">terms and conditions</CDBLink></p>
            <div className="d-flex align-items-center">
                <span style={{border:"0.5px solid black", width:"45%"}}/>
                <span className="text-center" style={{width:"10%"}}>OR</span>
                <span style={{border:"0.5px solid black", width:"45%"}}/>
            </div>
            <div className="row my-3 d-flex justify-content-center">
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="facebook-f" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                color="dark"
                flat
                className="mx-2"
              >
                <CDBIcon fab icon="twitter" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="google-plus-g"/>
              </CDBBtn>
            </div>
            <p className="text-muted text-center">Have an Account? <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign In</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </div>
    );
}

Sign Up 2

Pro Component

hero

Live Preview

import React from 'react';
import {
  CDBLink,
  CDBIcon,
  CDBCard,
  CDBBtn,
  CDBInput,
  CDBCardBody,
  CDBNavbar,
  CDBNavBrand } from "cdbreact";
import "./SignUp2.css";
export const SignUp2 = () => {
    return(
        <div className="signUp2">
            <div className="position-relative">
        <img alt="Background" src="/img/pages/signIn.png" className="image"/>
      </div>
      <div className="body">
        <CDBNavbar className="navigation bg-transparent" light expand="md" scrolling>
          <CDBNavBrand href="/" className="d-flex align-items-center">
            <img alt="logo" src="/img/pages/logo.png" width="25px"/>
            <span className="ml-3 h5 my-0 font-weight-bold">Devwares</span>
          </CDBNavBrand>
        </CDBNavbar>
        <CDBCard className="form">
          <CDBCardBody className="form-body" style={{minWidth:"300px"}}>
            <div className="mt-4 mb-5">
              <p className="h3 font-weight-bold">Sign Up</p>
            </div>
            <label htmlFor="defaultRegisterUsername" className="text-muted m-0">
              Username
            </label>
            <CDBInput id="defaultRegisterUsername" className="mt-n3" background hint="Username" type="text" />
            <label htmlFor="defaultRegisterPassword" className="text-muted m-0">
              Password
            </label>
            <CDBInput id="defaultRegisterPassword" className="mt-n3" background hint="Password" type="password"/>
            <CDBBtn
              color="dark"
              className="btn-block w-100 mb-3 mt-5" >
                Sign up
            </CDBBtn>
            <p className="text-muted text-center">By Clicking sign up, you agree to the Contrast <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">terms and conditions</CDBLink></p>
            <div className="d-flex align-items-center">
              <span style={{border:"0.5px solid black", width:"45%"}}/>
              <span className="text-center" style={{width:"10%"}}>OR</span>
              <span style={{border:"0.5px solid black", width:"45%"}}/>
            </div>
            <div className="row my-3 d-flex justify-content-center">
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="facebook-f" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                color="dark"
                flat
                className="mx-2"
              >
                <CDBIcon fab icon="twitter" />
              </CDBBtn>
              <CDBBtn
                size="sm"
                flat
                color="dark"
              >
                <CDBIcon fab icon="google-plus-g"/>
              </CDBBtn>
            </div>
            <p className="text-muted text-center">Have an Account? <CDBLink style={{fontWeight:"600"}} className="d-inline p-0 text-dark" to="#">Sign Up</CDBLink></p>
          </CDBCardBody>
        </CDBCard>
            </div>
        </div>
    );
}

Alert

Autocomplete