JSFiddle - React, Tailwind, and code Playground

HTML

<div class=my_button onclick="my_button_press()">
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSYgWk-FQoHoOBkybFFqnKC2QIxljywivoIGVbhwETEaZZ7pj1RFQ" class=img2></img>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQz-Pee90xcjVoABB7c6_ChCi5vIiAyeap0-59Ld2dUFLR24SCI" class=img1></img> <span class=my_text>Click here for a surprise!</span>

</div>
<iframe id=my_iframe></iframe>

CSS

body {
    background-color:lightgray;
}
.my_button {
    position:relative;
    width:400px;
    height:150px;
    padding:16px;
    background-color:white;
}
.my_button:hover {
    left:2px;
    top:2px;
}
.img1 {
    margin-left:16px;
    height:150px;
    width:auto;
}
.img2 {
    float:right;
    margin-right:16px;
    height:150px;
    width:auto;
}
.my_text {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
}
#my_iframe {
    width:300px;
    height:232px;
    margin-left:64px;
}

JavaScript

function my_button_press() {
    console.log(document.getElementById('my_iframe'))
    document.getElementById('my_iframe').src = 'https://p.gr-assets.com/540x540/fit/hostedimages/1380395826/762534.jpg';
}