JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="el" contenteditable>
  
</div>

CSS

.el {
  min-height: 2em;
  border: 1px solid #888;
  padding: 1em;
  border-radius: 3px;
}

JavaScript

function createReoodleFragment(dynamicTextKeys) {
	const divider_str = "=======";

	return `
		<div>${divider_str}</div>
		<div>Reoodle<div>
		<div>${divider_str}</div>
		${dynamicTextKeys.reduce((accum, key) => {
			return accum + `<div>${key}:<div>`;
		}, "")}
		<div>${divider_str}</div>
	`;
}


document.querySelector('.el').innerHTML += '\n\n\n'
document.querySelector('.el').innerHTML += createReoodleFragment(['name', 'room']);