JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="col_third">
        <div class="hover panel col">
            <div class="front col">
                <div class="box1 col">
                    <canvas id="house" width=300 height=300></canvas>
                    <canvas id="canvas" width=300 height=300></canvas>
                    <canvas id="canvas2" width=300 height=300></canvas>
                </div>
            </div>

        </div>
    </div>

    <div class="col_third">
        <div class="full-width secound-div">
            <h3>Style</h3>
            <p class="styles">Back</p>

            <ul class="listing" id="style">
                <li data-filename="http://via.placeholder.com/350x150/000000/ffffff?text=Imagetwo">
                    <div class="image-container">

                        <p class="center"> Classic U</p>
                    </div>
                </li>
                <li data-filename="http://via.placeholder.com/350x150/ffffff/000000?text=Imagethree">
                    <div class="image-container">

                        <p class="center"> Classic U</p>
                    </div>
                </li>
                <li data-filename="http://via.placeholder.com/350x150/ffffff/000000?text=Imageone">
                    <div class="image-container">

                        <p class="center">   U Double Dori</p>
                    </div>
                </li>
            </ul>

            <p class="styles">Sleeves</p>

            <ul class="listing" id="Sleeves">
                <li data-filename="http://via.placeholder.com/350x150/ffffff/000000?text=Imageone">
                    <div class="image-container">

                        <p class="center">Cap</p>
                    </div>
                </li>
                <li data-filename="http://via.placeholder.com/350x150/ffffff/000000?text=Imageone">
                    <div class="image-container">

                        <p class="center">Short</p>
                   ...

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    padding: 0;
    margin: 0;
}


.back-design
{
 position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

body {
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: #666666;
    width: 100%;
    float: left;
}


.col{
    width: 100%;
    float: left;
}
.container
{
    width: 1170px;
    margin: 0 auto;
}
.col_third
{
    width: 50%;
    float: left;
    padding: 0px 15px;
}
.panel
{
    margin-top: 30px;

}
.box1
{
    width: 100%;
    float: left;
    height: 484px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
}

.full-width
{
    width: 100%;
}

.listing
{
    padding: 0px;
    margin: 0px;
    width: 100%;
    float: left;
    margin-bottom: 20px;
}
.listing li{
    width: 25%;
    float: left;
    list-style-type: none;
    margin-right: 15px;
}
.listing li img
{
    width: 100%;
}

.secound-div
{
    margin-top: 30px;
}
.center
{
    text-align: center;
}

h3
{
    margin-bottom: 20px;
    text-transform: uppercase;
}

.styles
{
    font-size: 14px;
    text-transform: uppercase;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}
.image-container p{
    font-size: 16px;

}

.container{position:relative;}
#house{position:absolute; top:0; left:0;right: 0;margin: auto;z-index: 5}
#canvas{position:absolute; top:0; left:0;right: 0;margin: auto;z-index: 10;}
#canvas2{position:absolute; top:0; left:0;right: 0;margin: auto;z-index: 0;}
#canvas2.show-z{z-index: 9;}

JavaScript

$(function(){

            var house=document.getElementById("house");
            var ctxHouse=house.getContext("2d");
            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");
            var canvas2=document.getElementById("canvas2");
            var ctxHand=canvas2.getContext("2d");
            var FabricLink;
            var imageObj = new Image();
            var red=new Image();
            red.onload=function(){
                canvas.width=red.width;
                canvas.height=red.height;

                var houseImage=new Image();
                houseImage.onload=function(){
                    house.width=houseImage.width;
                    house.height=houseImage.height;
                    ctxHouse.drawImage(houseImage,0,0);
                }
                houseImage.src="http://via.placeholder.com/350x150/ffffff/000000?text=Imageone";

                ctx.drawImage(red,0,0);


                imageObj.onload = function() {
                    var pattern = ctx.createPattern(imageObj, 'repeat');
                    ctx.globalCompositeOperation = 'source-in';
                    ctx.rect(0, 0, canvas.width, canvas.height);
                    ctx.fillStyle = pattern;
                    ctx.fill();
                };
                $(imageObj).attr('src', FabricLink );
            }
            red.src="http://via.placeholder.com/350x150/ffffff/000000?text=Imageone";
            var imageObj2 = new Image();
            var blue=new Image();
            blue.onload=function(){
                canvas2.width=blue.width;
                canvas2.height=blue.height;

                var houseImage=new Image();
                houseImage.onload=function(){
                    house.width=houseImage.width;
                    house.height=houseImage.height;
                    ctxHouse.drawImage(houseImage,0,0);
                }
               ...