JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <input id="startButton" type="button" value="Start" />
</p>

<input id="btnTrain" type="button" value="Train Station" disabled="disabled" />
<input id="btnBus" type="button" value="Bus Station" disabled="disabled" />
<input id="btnYouth" type="button" value="Youth Hostel" disabled="disabled" />
<input id="btnFootpath" type="button" value="FootPath" disabled="disabled" />
<input id="btnBridle" type="button" value="Bridleway" disabled="disabled" />
<input id="btnWorship" type="button" value="Place of Worship" disabled="disabled" />
<input id="btnHouse" type="button" value="Public House" disabled="disabled" />
<input id="btnCar" type="button" value="Car Park" disabled="disabled" />
<input id="btnRoad" type="button" value="Road" disabled="disabled" />
<input id="btnPillar" type="button" value="Triangulation Pillar" disabled="disabled" />

<p id="paragrapgh"> </p>
<div class="contents" id="content"></div>

<img id="imgTrain" src="C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg" width="100" height="100" style="display:none;" />
<img id="imgBus" src="C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg" width="100" height="100" style="display:none;" />
<img id="imgYouth" src="C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg" width="100" height="100" style="display:none;" />
<img id="imgFootpath" src="C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg" width="100" height="100" style="display:none;" />
<img id="imgBridle" src="C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg" width="100" height="100" style="display:none;" />
<img id="imgWorship" src="C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" width="100" height="100" style="display:none;" />
<img id="imgHouse" src="C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg" width="100" height="100" style="display:none;" />
<img id="imgCar" src="C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg" width="100" height="100" style="display:none;" />
<img id="imgRoad" src="C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" width="100" height="100"...

CSS

body {
    background-color: lightblue;
}

#paragrapgh{
	display: block;
	margin:20px auto;
	text-align:center;
}
#content{
	text-align:center;
	margin:20px autp;
}

JavaScript

var startButton = document.getElementById('startButton');
	startButton.addEventListener('click', function(){
		btnStart();
		displayRandomImage();
	});
function btnStart() {
    var x = document.getElementById("paragrapgh");
    x.style.fontSize = "25px";
    x.style.color = "red";
    document.getElementById("paragrapgh").innerHTML = "What Is This Symbol?";
}

function displayRandomImage() {
    var Images1 = new Array();
    Images1[0] = "C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg"
    Images1[1] = "C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg"
    Images1[2] = "C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg"
    Images1[3] = "C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg"
    Images1[4] = "C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg"
    Images1[5] = "C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg"
    Images1[6] = "C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg"
    Images1[7] = "C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg"
    Images1[8] = "C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg"
    Images1[9] = "C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg"

    var random = Images1[Math.floor(Math.random() * Images1.length)];
    document.getElementById("content").innerHTML = random;
}