JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <template id="image-template">
    <div>
      <h2>Javascript</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" alt="js-logo" style="height: 50px; width: 50px;">
    </div>
  </template>
</body>

JavaScript

const $body = document.querySelector('body');

/**
 * Get Reference to Template
 */
const $template = document.querySelector('#image-template');

const $javascript = document.importNode($template.content, true); // Make deep copy of the template
$body.appendChild($javascript); // Append it to the DOM

const $ruby = document.importNode($template.content, true); // Make deep copy of the template

/**
 * Make modifications to the Deep Copy
 */
$ruby.querySelector('h2').textContent = "Ruby";
$ruby.querySelector('img').setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png');

/**
 * Append the modified element to the DOM
 */
$body.appendChild($ruby);

/**
 * Repeat the same step again to add more elements
 */
const $python = document.importNode($template.content, true);
$python.querySelector('h2').textContent = "Python";
$python.querySelector('img').setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png');
$body.appendChild($python);