JSFiddle - React, Tailwind, and code Playground

by Codi Bezouka-Smith

HTML

<div id="categories"></div>

SCSS

@mixin flex($direction,$align,$justify) {
	align-items: $align;
	display: flex;
	flex-direction: $direction;
	justify-content: $justify;
}
#categories {
	@include flex(column, flex-start, flex-start);
	padding: 10px;
	
	a {
		@include flex(row, center, center);
		background: rgb(0, 0, 0);
		color: rgb(255, 255, 255);
		min-width: 80px;
		padding: 5px 10px;
		text-decoration: none;
		&:not(:last-of-type) { margin-bottom: 5px; }
	}
}

JavaScript

const str = 'html, css, php';
console.log(str.split(','));

const categories = str.split(',')
const trg = document.getElementById('categories');
categories.forEach((category) => {
	const cat = document.createElement("A");
	cat.setAttribute('class', 'category');
	cat.setAttribute('href', '#');
	cat.innerHTML = category;
	trg.appendChild(cat);
});