JSFiddle - React, Tailwind, and code Playground

HTML

<div id="over" class="mocha">
<iframe src="http://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/photo71000333.png"></iframe>
</div>
<form id="radio">
<input type="radio" name="color" value="white" id="whiteradio">White<br>
<input type="radio" name="color" value="oak" id="oakradio">Oak<br>
<input type="radio" name="color" value="mocha" id="mocharadio">Mocha<br>
</form>

CSS

#over.mocha {
background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_mocha.jpg");
background-repeat: no-repeat;
height: 515px;
width: 1190px;
margin: 0 auto 30px;
position: relative;
}

iframe {
height: 333px;
width: 1000px;
position: absolute;
top: 93px;
left: 93px;
}

#over.white {
background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_white.jpg");
background-repeat: no-repeat;
height: 515px;
width: 1190px;
margin: 0 auto 30px;
position: relative;
}
#over.oak {
background-image: url("https://photography.bytebros.com.au/wp-content/uploads/sites/5/2017/09/pan_oak.jpg");
background-repeat: no-repeat;
height: 515px;
width: 1190px;
margin: 0 auto 30px;
position: relative;
}

JavaScript

$("#radio").on('change','input[type=radio]',(function() { 
if($("#oakradio").is(":checked")){
$("#over").removeClass();
$('#over').addClass('oak');
}
else if($("#whiteradio").is(":checked")){
$("#over").removeClass();
$('#over').addClass('white');
}
else if($("#mocharadio").is(":checked")){
$("#over").removeClass();
$('#over').addClass('mocha');
}
}));