JSFiddle - React, Tailwind, and code Playground

HTML

<span id="bin"></span>

CSS

body>div{
 background-color:#000;
 width:56px;
 height:72px;
 float:left;
}
body>div>div.active{
 opacity:1;
}
body>div>div{
 width:4px;
 height:4px;
 border-radius:4px;
 background-color:#0ff;
 box-shadow:0 0 4px 1px #0ff;
 margin:2px;
 float:left;
 opacity:0.2;
}

JavaScript

var create;
function calcBin(){
 var a=create.childNodes,s='';
 for(var b=0;b<a.length;b++){
  s+=''+(a[b].classList.contains('active')?1:0)
 }
 bin.textContent=s;
}
function toggle(e){
 e.target.parentNode.className!='create'||e.target.classList.toggle('active');
 calcBin();
}
function letter(){
 var f=document.createDocumentFragment();
 for(var b=0;b<63;b++){
  f.appendChild(document.createElement('div'));
 }
 var l=document.createElement('div');
 l.className='create';
 l.addEventListener('click',toggle,false);
 l.appendChild(f);
 return l
}
create=letter();
var bin=document.getElementById('bin');
document.body.appendChild(create);