<div class="background">
  <div class="top-head"></div>
   <div class="container">
    <div class="row">
    <div class="content">
      <div class="content-head">
        <h1>Please Enter OTP</h1>
      </div><br>


      <form class="form-otp mb-4">
      <div class="form-group row">
        <div class="input-code">
        <input type="text" id="otp-number-input-1" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue1" numbers-only>
    
        <input type="text" id="otp-number-input-2" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue2" numbers-only>
    
        <input type="text" id="otp-number-input-3" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue3" numbers-only>
    
        <input type="text" id="otp-number-input-4" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue4" numbers-only>
    
        <input type="text" id="otp-number-input-5" class="otp-number-input" tabindex="5" maxlength="1" ng-change="myFunc(this)" ng-model="myValue5" numbers-only>
        <input type="text" id="otp-number-input-6" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue6" numbers-only>
        </div>
      </div>
      </form>
      <p class="message">Change Number ?</p>
           
      <button class="submit-button mt-3" mat-raised-button>Verify</button>
    </div>
    </div>
    </div>
</div>

.background {
    background-color: #ffffff;
     width: 100%;
   }
   
   .top-head {
     background-color: #4FBEC6;
     color: #ffffff;
     width: 100%;
     height: 30px;
   }
 
   .content {
     margin: auto;
     margin-top: 60px;
     width: 100%;
     height: 100%;
     padding: 20px;
     background-color: #ffffff;
     text-align: center;
   }
 
 .content-head h1{
     font-size: 20px;
     padding-top: 15px;
     padding-bottom: 15px;
 }
 

  .content .input-code {
    margin-top: 50px;
    padding: 10px;
    display: flex;
    flex-direction: auto;
    justify-content: space-around;
    align-content: space-between;
  }
  
  .content .otp-number-input 
  {
    text-align: center;
    line-height: 8px;
    font-size: 30px;
    width: 10%;   
    border-radius: 7px;
    border: 2px solid #4FBEC6;
    margin-bottom: 50px;
  }

  input {
    border: 2px solid #4FBEC6;
    border-radius: 7px;
    padding: 9px;
    padding-left: 10px;
    align-content: space-between;
    width: 30px;
    overflow: hidden;

 }
 
 .content .otp-number-input:focus 
 {
    border: 2px solid #4FBEC6 ;
  }

  .content .otp-number-input::selection {
    background: transparent;
    border: 2px solid #4FBEC6 ;
  }
 
 .submit-button {
     background: linear-gradient(to right, #19ecf4, #16e2e9);
     color: #ffffff;
     width: 100%;
     margin-top: 15px;
     margin-bottom: 15px;
 }
  
 @media screen and (max-width: 374px) {
     input {
         width: 210px;
         margin-left: auto;
     }
   }