JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.css"/>

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.js"></script>

    

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  
  <body>
   <div class="container">
    <form role="form" method="POST" action="">
      <div class="row my-4">
       <div class="col-12 text-center">
        <div class="pinBox">
         <input class="pinEntry" name="token" type="text" maxlength="4" value="">
        </div>
       </div>
      </div>
      
      <div class="text-center">
         <button type="submit" class="btn btn-primary mt-2">submit</button>
     </div>
  </form>
 </div>
    
    
</body>
</html>

CSS

.pinBox {
    display: inline-block;
    overflow: hidden;
    position: relative;
    direction:ltr;
    text-align:left;
}

.pinBox:before {
    position: absolute;
    left: 0;
    right: 0;
    content: '';
    pointer-events: none;
    display: block;
    height: 75px;
    width: 300px;
    background-image: url(https://petrobarghjnob.ir/img/layouts/pincode.webp);
}

.pinEntry {
    position: relative;
    padding: 16px 29px;
    font-family: courier, monospaced;
    font-size: xx-large;
    border: none;
    outline: none;
    width: 302px;
    letter-spacing: 55px;
    background-color: transparent;
    overflow: hidden;
    text-align: left;
    direction:ltr;
}