JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inputBox">
  <h2>Random</h2>
  <input type="text" placeholder="create password" id="password">
  <button id="btn" onclick="getPassword()">generate</button>
</div>

CSS

input {
  border: none;
  outline: none;
  box-shadow: -4px -4px 10px rgba(255, 255, 255, 1),
    inset 4px 4px 10px rgba(0, 0, 0, 0.05),
    inset -4px -4px 10px rgba(255, 255, 255, 1),
    4px 4px 10px rgba(0, 0, 0, 0.05);
  padding: 12px;
}

JavaScript

function getPassword() {
  var chars = "123";
  var passwordLength = 4;
  var password = "";
  for (var i = 0; i < passwordLength; i++) {
    var randomNumber = Math.floor(Math.random() * chars.length);
console.log(randomNumber);
      password += chars.substring(randomNumber, randomNumber + 1);
    }
    document.getElementById('password').value = password;
  }