JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="container">
</div>

CSS

body{
	background:#20262e;
	margin:0;
	padding:0;
}

#container{
	width:60%;
	display:flex;
	flex-flow:row;
	flex-wrap:wrap;
	justify-content:start;
}

#container > div{
	margin:.1em;
}

JavaScript 1.7

const container = document.getElementById("container");
const letters = "abcdefghijklmnopqrstuvwxyzæøå".split('');

const template = (letter) => {
	let div = document.createElement('div');
	div.id = 'usr-badge';
	div.style.fontSize = "1.2em";
	div.style.fontFamily = "Areal, sans-serif";
	div.style.fontWeight = "500";
	div.style.color = "#FFFFFF";
	div.style.background = "#00BB77";
	div.style.display = "flex";
	div.style.justifyContent = "center"
	div.style.alignItems = "center";
	div.style.height = "2em";
	div.style.width = "2em";
	div.style.borderRadius = "100%";
	
	div.innerText = letter[0].toUpperCase();
	
	return div;
}

const makeLetter = () => {
	letters.forEach((letter) => {
		container.append(template(letter));
	});
}

makeLetter();