JSFiddle - React, Tailwind, and code Playground

by gschutz

CSS

body {
  font: 14px sans-serif;
}
.treta {
    width: 30px;
    text-align: left;
    display: inline-block;
    margin-left: 20px;
    line-height: 1.5;
}

.t1 {
    text-align: right;
  color: #999;
}

JavaScript

var al =["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
al = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var n = 0;
for(var i = 0; i < al.length; i++) {
	a1 = al[i];
  var word = "";
  for(var k = 0; k < al.length; k++) {
  	word = 'ca' + a1 + al[k];
    n += 1;
  	document.body.innerHTML += '<div class="treta t1">'+n+'</div>:';
		document.body.innerHTML += '<div class="treta">' + word + '</div><br>';
  }
}