JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">

</div>

JavaScript

// component Hello in pure JavaScript (ES6)
// just normal function
// the same thing can be achieved in ES5
// but function itself will be uglier
function Hello({name}) {
    return `<h1>Hello, ${name}</h1>`;
}

// component Header in pure JavaScript (ES6)
function Header({children}) {
    const style = `
    	box-shadow:2px 2px 4px red; 	
    	background:#4a4"`;
   
    return `<div style="${style}">
    ${children.join('')}
    </div>`;
}

// we call these components
const html = Header({
    	children: [
          Hello({name:'John'}),
          '<h4>nice to meet you!</h4>'
      ]    
});
// and set innerHTML
document.getElementById('content').innerHTML = html;