JSFiddle - React, Tailwind, and code Playground

by nickkell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/labella/1.1.4/labella.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.js"></script>
<div id="container">

</div>

TypeScript

const words = [
  {text: 'Ich', categories: ['object', 'nominative']},
  {text: 'gebe', categories: ['verb']},
  {text: 'dem Mann', categories: ['object', 'dative', 'masculine', 'noun']},
  {text: 'den Hund', categories: ['object', 'accusative', 'masculine', 'noun']},
];

const container = document.getElementById('container');
const spans = words.map(word => {
		const span = document.createElement('span');
    span.innerHTML = word.text;
    return span;
});

spans.forEach(span => {
	container.appendChild(span);
  const ws = document.createElement('span');
	ws.innerHTML = ' ';
  container.appendChild(ws);
});