JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list"></div>
<pre id="source"></div>

CSS

#source {
    font-family: monospace;
    white-space: pre;
    margin-top: 10px;
}

JavaScript

var items = [
  {name:'Coch',image:'upload/coch.png'},
  {name:'Glas',image:'upload/glas.png'},
  {name:'Melyn',image:'upload/melyn.png'},
  {name:'Ci',image:'upload/dog.jpg'},
  {name:'Cath',image:'upload/cath.jpg'},
  {name:'Gwyrdd',image:'upload/gwyrdd.png'},
  {name:'Un',image:'upload/un.jpg'},
  {name:'Dau',image:'upload/dau.jpg'},
  {name:'Tri',image:'upload/tri.jpg'},
  {name:'Bochdew',image:'upload/bochdew.jpg'},
  {name:'Piws',image:'upload/piws.png'}
];
var list = document.getElementsByTagName('div')[0];
for(i = 0; i < 3; i++) {
  // Choose a random item and remove it from the array
  var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];

  // Create the image element and set its src attribute
  var image = document.createElement('img');
  image.src = item.image;

  // Add it to your container element
  list.appendChild(image);
  list.appendChild(document.createElement('br'));
  list.appendChild(document.createTextNode('\n'));
}

// Output resulting html
var node = document.createTextNode(list.innerHTML.toString());
var text = document.createElement('div');
text.appendChild(node);
document.getElementById('source').innerHTML = text.innerHTML;