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 () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/scarlet-dress-sized.png");
    });
    $('.navy').click(function () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/navy-dress-sized.png");
    });
    $('.purple').click(function () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/purple-dress-sized.png");
    });
    $('.yellow').click(function () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/yellow-dress-sized.png");
    });
});