JSFiddle - React, Tailwind, and code Playground

HTML

<body style="margin:0 0 0 0;">
    <div class="background">
        <div id="index-dress">
            <img src="http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/yellow-dress-sized.png" style="width:161.49px; height:311.783px; float:right; margin-top:108px; margin-right:5px;"></img>
        </div>
        <div id="textandarrow"></div>
<span class="buttons 1"><img src="http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/scarlet-button.png"></img></span>

<span class="navy 2"><img src="http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/navy-button.png"></img></span>

<span class="purple 3"><img src="http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/purple-button.png"></img></span>

<span class="yellow 4"><img src="http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/yellow-button.png"></img></span>

    </div>
</body>

CSS

.background {
    background-image:url(http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/background.png);
    background-repeat:no-repeat;
    width:335.461px;
    height:419.506px;
}
#textandarrow {
    background-image:url(images/tap-to-change-the-colour.png);
    background-repeat:no-repeat;
    width:114px;
    height:128px;
}
.buttons {
    display:block;
    margin-top:6px;
    margin-left:55px;
}
.navy {
    display:block;
    margin-top:13px;
    margin-left:55px;
}
.purple {
    display:block;
    margin-top:10px;
    margin-left:55px;
}
.yellow {
    display:block;
    margin-top:12px;
    margin-left:55px;
}

JavaScript

$(document).ready(function () {

    $('.buttons').click(function () {
        $('img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/scarlet-dress-sized.png");
    });

    $('.navy').click(function () {
        $('img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/navy-dress-sized.png");
    });

    $('.purple').click(function () {
        $('img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/purple-dress-sized.png");
    });

    $('.yellow').click(function () {
        $('img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/yellow-dress-sized.png");
    });


});