JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

<script id="template" type="text/template">

  <h1>${title.toUpperCase()}</h1>
  
  <p>
    ${body}
  </p>
  
  <ul>
  	${tags.map(tag => `
    	
      <li>${tag}</li>
      
    `).join('')}
  </ul>

</script>

JavaScript

function render(context, domNode) {

	const template = document.querySelector('#template').innerText;

  /***** 
  
  🚨🚨🚨🚨🚨🚨
  
  WITH STATEMENT SIGHTING
  EVAL SIGHTING
  
  🚨🚨🚨🚨🚨🚨
  ******/

	with (context) {
  	domNode.innerHTML = eval('`' + template + '`');
  }
}



render({
  title: 'Naz talks with statement',
  body: 'The with statement makes the keys in the context available as variables inside its scope!',
  tags: ['squarespace', 'ejs', 'future']
}, document.querySelector('#output'));