JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/noppa/text-security/master/dist/text-security.css">
<body>

  <table>
    <thead>
      <tr>
        <th></th>
        <th>This library</th>
        <th><code>-webkit-text-security</code></th>
        <th><pre>&#060;input type="password"&#062;</pre><small>(for comparison)</small></th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th><pre>&#060;input type="text"&#062;</pre> with normal password style</th>
        <td><input type="text" class="conceal"></td>
        <td><input type="text" class="conceal-native"></td>
        <td><input type="password"></td>
      </tr>

      <tr>
        <th><pre>&#060;input type="tel"&#062;</pre> with circles</th>
        <td><input type="tel" class="conceal-circle"></td>
        <td><input type="tel" class="conceal-native-circle"></td>
        <td><input type="password"></td>
      </tr>

      <tr>
        <th><pre>&#060;p&#062;</pre> with squares</th>
        <td><p class="conceal-square">I sure hope this works</p></td>
        <td><p class="conceal-native-square">so that they will never</p></td>
        <td><input type="password" value="find out what I wrote here."></td>
      </tr>

    </tbody>
  </table>

  <button onclick="reveal()">Reveal the secrets</button>
</body>

CSS

body {
   font-family: Arial;
}
.conceal {
  font-family: 'text-security-disc';
}
.conceal-circle {
  font-family: 'text-security-circle';
}
.conceal-square {
  font-family: 'text-security-square';
}
.conceal-native {
  -webkit-text-security: disc !important;
}
.conceal-native-circle {
  -webkit-text-security: circle !important;
}
.conceal-native-square {
  -webkit-text-security: square !important;
}
pre, code {
  background: lightgray;
}
td {
  padding: 20px;
}
button {
  margin-top: 100px;
}

JavaScript

function reveal() {
  var elements = [];
  Array.prototype.push.apply(elements, document.getElementsByTagName('input'));
  Array.prototype.push.apply(elements, document.getElementsByTagName('p'));

  for(var i = 0; i<elements.length; i++) {
    console.log('Found value: ' + elements[i].value || elements[i].innerHTML);
    if(elements[i].type === 'password') {
      elements[i].type = 'text';
    } else {
      elements[i].className = '';
    }
  }
}

window.reveal = reveal;