JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<input onclick="appRandom();" type=button value="Appy">
<input onclick="zebRandom();" type=button value="Zebra">
<input onclick="markingRandom();" type=button value="Paint">
<input onclick="faceRandom();" type=button value="Face">
<input onclick="wingbaseRandom(); wingmarkRandom();" type=button value="Wings">
<input onclick="basecoatRandom();" type=button value="Base coat">
<input onclick="basecoatRandom(); markingRandom(); zebRandom(); appRandom(); faceRandom(); wingbaseRandom(); wingmarkRandom();" type=button value="Random all">
<p>
<div class='img-container'>
  <img src="http://orig02.deviantart.net/4878/f/2017/032/8/a/baseblack_by_bronzehalo-daxjx3e.png" name="canvas4" />
  <div id="paintlayer">
  <img src="http://orig10.deviantart.net/8a43/f/2017/032/3/b/splash3_by_bronzehalo-daxjwsw.png" name="canvas3" />
  <img src="http://orig10.deviantart.net/8a43/f/2017/032/3/b/splash3_by_bronzehalo-daxjwsw.png" name="canvas3b" />
  </div>
  <div id="zebralayer">
  <img src="http://orig02.deviantart.net/ddf5/f/2017/032/7/3/zebforedark_by_bronzehalo-daxjwmg.png" name="canvas2" />
  <img src="http://orig02.deviantart.net/ddf5/f/2017/032/7/3/zebforedark_by_bronzehalo-daxjwmg.png" name="canvas2b" />
  </div>
  <div id="appylayer">
  <img src="http://orig07.deviantart.net/e6b3/f/2017/032/b/1/app1hinddark_by_bronzehalo-daxjx5y.png" name="canvas1" />
  <img src="http://orig07.deviantart.net/e6b3/f/2017/032/b/1/app1hinddark_by_bronzehalo-daxjx5y.png" name="canvas1b" />
  </div>
  <div id="facelayer">
  <img src="http://orig05.deviantart.net/02e8/f/2017/085/f/1/facebit4_by_bronzehalo-db3m8xg.png" name="canvasface" />
  </div>
  <div id="shading">
  <img src="http://orig14.deviantart.net/c73c/f/2017/086/7/3/shadi_by_bronzehalo-db3r5wo.png" name="canvasshade" />
  </div>
  <div id="wings">
  <img src="http://orig03.deviantart.net/6978/f/2017/086/e/3/wing6_by_bronzehalo-db3r5vx.png" name="canvaswingbase" />
  <img...

CSS

.img-container {
  background-image: url(https://www.bas.ac.uk/wp-content/uploads/2015/03/Geography_header-400x300.jpg);
  height: 300px;
  position: relative;
  width: 400px;
}

.img-container img {
  left: 0;
  position: absolute;
  top: 0;
}

div#facelayer {
  height: 100px;
  position: absolute;
  width: 100px;
  right: 20px;
}

JavaScript

function appRandom() {
  var appArray = [
    "http://orig12.deviantart.net/5d59/f/2017/032/2/6/app2midwhite_by_bronzehalo-daxjx3u.png", 
    "http://orig04.deviantart.net/892c/f/2017/032/7/9/app2middark_by_bronzehalo-daxjx44.png", 
    "http://orig04.deviantart.net/623a/f/2017/032/d/2/app2hindwhite_by_bronzehalo-daxjx48.png", 
    "http://orig06.deviantart.net/f3b0/f/2017/032/7/5/app2hinddark_by_bronzehalo-daxjx4f.png", 
    "http://orig08.deviantart.net/674a/f/2017/032/1/8/app2forewhite_by_bronzehalo-daxjx4m.png", 
    "http://orig12.deviantart.net/e43a/f/2017/032/e/b/app2foredark_by_bronzehalo-daxjx4r.png", 
    "http://orig10.deviantart.net/0762/f/2017/032/c/f/app1midwhite_by_bronzehalo-daxjx4y.png", 
    "http://orig04.deviantart.net/ff78/f/2017/032/0/4/app1middark_by_bronzehalo-daxjx5a.png", 
    "http://orig14.deviantart.net/c2d2/f/2017/032/7/5/app1foredark_by_bronzehalo-daxjx66.png", 
    "http://orig13.deviantart.net/10bf/f/2017/032/8/8/app1forewhite_by_bronzehalo-daxjx65.png", 
    "http://orig07.deviantart.net/e6b3/f/2017/032/b/1/app1hinddark_by_bronzehalo-daxjx5y.png", 
    "http://orig02.deviantart.net/8e88/f/2017/032/1/c/app1hindwhite_by_bronzehalo-daxjx5r.png", 
  ];
  var num = Math.floor(Math.random() * appArray.length);
  document.canvas1.src = appArray[num];
  var num2 = Math.floor(Math.random() * appArray.length);
  document.canvas1b.src = appArray[num2];
}

function zebRandom() {
  var zebArray = [
    "http://orig11.deviantart.net/0662/f/2017/032/9/7/zebdotfacedark_by_bronzehalo-daxjwqp.png", 
    "http://orig11.deviantart.net/5232/f/2017/032/9/6/zebdotfacepale_by_bronzehalo-daxjwqi.png", 
    "http://orig14.deviantart.net/c0ad/f/2017/032/1/a/zebdotfacewhite_by_bronzehalo-daxjwqa.png", 
    "http://orig01.deviantart.net/2502/f/2017/032/0/3/zebdotforedark_by_bronzehalo-daxjwq5.png", 
    "http://orig04.deviantart.net/6c06/f/2017/032/9/4/zebdotforepale_by_bronzehalo-daxjwpt.png", 
   ...