JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <body>
    <div class="input">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" />

      <label for="password">Password</label>
      <input type="text" id="password" name="password" />
    </div>

    <div class="results">
      <div>
        Final <span class="code">Authorization</span> Header: <span class="result" id="final">(no input)</span>
      </div>
      <h1>
      intermediary values
      </h1>
      <div>
        Result (post-base64): <span class="result" id="result">(no input)</span>
      </div>
      <div>
        Result (pre-base64): <span class="result" id="rawresult">(no input)</span>
      </div>

    </div>
  </body>

</html>

CSS

body {
    font-family:helvetica;
    font-size: .9em;
    background-color:#eee;
}

div.input {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-gap: 1em;
}

input {
  color: #000;
  background-color: #FFF;
  padding: 0.3em;
  border-radius: 0.25rem;
  border-color: #71717a;
  border-width:1px;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
  
  --tw-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.175);
  --tw-shadow-colored: inset 0 1px 1px 0 var(--tw-shadow-color);

}

label {
  display: block;
  line-height: 2em;
  margin-right: 1em;
  color: rgb(113 113 122);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-weight:600;
}

div.results {
    display:block;
    grid-template-columns: max-content max-content;
    grid-gap:15px;
    margin-top:1em;
}

h1 {
  font-size: 1em;
  padding-top:1em;
  color:#555;
}

div.results div {
  margin: 1em 1em 1em 0;
  color: rgb(113 113 122);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-weight:600;
}

div.results span.result {
 display:block;
   margin: .5em;
   padding: .5em;
   background-color: #fff;

   border: 1px solid rgb(212 212 216);
   border-radius: 0.25rem;
   user-select: all;
   cursor:pointer;
   
   color: #666;
   font-weight: normal;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: 0.75rem;
}

div.results span.code {
background-color: #cacaca;
color: #535353;
padding: .1em .3em .1em .3em;
font-family: courier;
font-weight: normal;
}

JavaScript

var usernameField = document.getElementById("username")
var passwordField = document.getElementById("password")
usernameField.addEventListener("input", function(e) {
    update()
}, false);

passwordField.addEventListener("input", function(e) {
    update()
}, false);

function update() {
    var username = usernameField.value
    var password = passwordField.value
    var combined = username + ":" + password;
    var encoded = b64EncodeUnicode(combined);

    document.getElementById("rawresult").innerHTML = combined;
    document.getElementById("result").innerHTML = encoded;
    document.getElementById("final").innerHTML = "Basic: " + encoded
}

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str));
}