JSFiddle - React, Tailwind, and code Playground

by Prasad Gavande

HTML

<div class="Images">
    <div>
        <img id="1" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100" />
    </div>
    <div>
        <img id="2" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100" />
    </div>
    <div>
        <img id="3" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100" />
    </div>
</div>
<div class="View"></div>

CSS

.View {
    margin-left: 29%;
    margin-top: -24%;
    border: 1px solid;
}

JavaScript

/*Replace Images*/

$(document).ready(function () {
    $("#1").on("click", function () {
        $('.View').prepend('<img id="1" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="400" />')
    });

    $("#2").on("click", function () {
        $('.View').prepend('<img id="2" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="400" />')
    });
    
     $("#3").on("click", function () {
        $('.View').prepend('<img id="3" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="400" />')
    });

});