React js example. 2 step verification form inside a card

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<div class="row justify-content-center mt-7">
    <div class="col-lg-5 text-center">
      <a href="index.html">
        <img src="assets/img/svg/logo.svg" alt=""/>
      </a>
      <div class="card mt-5">
        <div class="card-body py-5 px-lg-5">
          <div class="svg-icon svg-icon-xl text-purple">
            <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-g</title><path d="M336,208V113a80,80,0,0,0-160,0v95" style={{/*fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px*/}}></path><rect x="96" y="208" width="320" height="272" rx="48" ry="48" style={{/*fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px*/}}></rect></svg>
          </div>
          <h3 class="fw-normal text-dark mt-4">
            2-step verification
          </h3>
          <p class="mt-4 mb-1">
            We sent a verification code to your email.
          </p>
          <p>
            Please enter the code in the field below.
          </p>
            
          <div class="row mt-4 pt-2">
            <div class="col">
              <input type="text" class="form-control form-control-lg text-center py-4" maxlength="1" autofocus=""/>
            </div>
            <div class="col">
              <input type="text" class="form-control form-control-lg text-center py-4" maxlength="1"/>
            </div>
            <div class="col">
              <input type="text" class="form-control form-control-lg text-center py-4" maxlength="1"/>
            </div>
            <div class="col">
              <input type="text" class="form-control form-control-lg text-center py-4" maxlength="1"/>
            </div>
          </div>

          <a href="#!" class="btn btn-purple btn-lg w-100 hover-lift-light mt-4">
            Verify my account
          </a>
        </div>
      </div>

      <p class="text-center text-muted mt-4">
        Didn't receive it?
        <a href="#!" class="text-decoration-none ms-2">
          Resend code
        </a>
      </p>
    </div>
  </div>
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

body{margin-top:20px;
background:#f6f9fc;
}
.icon-circle[class*=text-] [fill]:not([fill=none]), .icon-circle[class*=text-] svg:not([fill=none]), .svg-icon[class*=text-] [fill]:not([fill=none]), .svg-icon[class*=text-] svg:not([fill=none]) {
    fill: currentColor!important;
}
.svg-icon-xl>svg {
    width: 3.25rem;
    height: 3.25rem;
}

.hover-lift-light {
    transition: box-shadow .25s ease,transform .25s ease,color .25s ease,background-color .15s ease-in;
}
.mt-4 {
    margin-top: 1.5rem!important;
}
.w-100 {
    width: 100%!important;
}
.btn-group-lg>.btn, .btn-lg {
    padding: 0.8rem 1.85rem;
    font-size: 1.1rem;
    border-radius: 0.3rem;
}
.btn-purple {
    color: #fff;
    background-color: #6672e8;
    border-color: #6672e8;
}

.text-center {
    text-align: center!important;
}
.py-4 {
    padding-top: 1.5rem!important;
    padding-bottom: 1.5rem!important;
}
.form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1e2e50;
    background-color: #f6f9fc;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}