JSFiddle - React, Tailwind, and code Playground

by Sean

HTML

<!DOCTYPE html>
<html>
<head>
<title>Castaway Vacations, LLC</title>
<script src="castaway.js"></script>
</head>
<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 text=#993300 link=#993300 vlink=#996633>
<br>
<table width=100% border=0 cellpadding=0 cellspacing=0>
  <tr>
    <td width=95% align="right" bgcolor=#ffffff><img src="castaway_logo.jpg">
    <br>
    <font face=arial>Vacations, LLC</font></td>
    <td bgcolor=#ffffff>&nbsp;</td>  
</tr>
</table>
<br><br>
<div align="center">
<table width=600>
  <tr>
    <td width=300 valign="top">
       <font face=arial size=3><b><i>Select Mood...</i></b></font><br><br>
       <font face=arial>
       <a id="one" href="#">Romantic</a><br><br>
       <a id="two" href="#">Adventure</a><br><br>
       <a id="three" href="#">Relaxation</a><br><br>
       <a id="four" href="#">Family</a><br><br><br><br>
       <a href="#">Request A Brochure...</a>
       </font>
    </td>
    <td align="center"><img id="original.jpg" src="orig_main.jpg"><br><i>Your Vacation Awaits!
  </tr>
</center>
</body>
</html>
</DOCTYPE>

JavaScript

function change_color(){
	document.body.style.color = "red";
    document.getElementById("original.jpg").src = "rom_main.jpg";
}

function change_color2(){
	document.body.style.color = "blue";
	document.getElementById("original.jpg").src = "adv_main.jpg";
}

function change_color3(){
	document.body.style.color = "green";
	document.getElementById("original.jpg").src = "rel_main.jpg";
}

function change_color4(){
	document.body.style.color = "orange";
	document.getElementById("original.jpg").src = "fam_main.jgp";
}

document.getElementById('one').addEventListener('click', change_color);
document.getElementById('two').addEventListener('click', change_color2);
document.getElementById('three').addEventListener('click', change_color3);
document.getElementById('four').addEventListener('click', change_color4);