JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<section class="page">
    <section id="section1" class="section section1"></section>
    <!--section premiere-->
    <section id="section2" class="section section2">
        <div id="content">
            <div id="cardPile"></div>
            <div id="cardSlots"></div>
        </div>
    </section>
    <!--section secondaire-->
</section>
<!--section principale-->

CSS

body {
	    background:#e4191c;
	}
	#content {
	    text-align: center;
	    -moz-user-select: none;
	    -webkit-user-select: none;
	    user-select: none;
	}
	#cardSlots {
	    width: 1460px;
	    text-align: center;
	    margin-right: 130px;
	    margin-left: auto;
	    margin-top: 130px;
	    clear: both;
	    box-sizing: border-box;
	}
	#cardSlots .slot-carre {
	    background:#DFE0D8;
	}
	#cardSlots div.hovered {
	    background: #fff;
	}
	#cardPile {
	    width: 410px;
	    position: absolute;
	    clear: both;
	    box-sizing: border-box;
	    top: 180px;
	    left: 110px;
	}
	#cardPile div {
	    width: 130px;
	    height: 130px;
	    float: left;
	    margin: 2px;
        background:#000;
	}
	#cardSlots div:first-child, #cardPile div:first-child {
	    margin-left: 0;
	}
	#cardPile img.ui-draggable-dragging {
	    width:213px;
	    height:213px;
	    -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
	    -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
	    box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        background:#fff;
	}
	#cardPile img.correct {
	    width:213px;
	    height:213px;
	    background-color: #E4191C;
	}
	#content img {
	    width: 100%;
	    height: auto;
	    position: absolute;
	    top: 0;
	    left: 0;
	}

JavaScript

$(document).ready(function () {
    var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];

    for (var i = 0; i < 30; i++) {


        $('<div>' +
            '</div>').data('number', numbers[i]).attr('id', 'card' + numbers[i]).appendTo('#cardPile').draggable({
            containment: '.section2',
            stack: '#cardPile div',
            cursor: '-webkit-grab',
            revert: false,
            disabled: true
        })
        $('<img src="../css/img/patchwork/' + numbers[i] + '.png" />').appendTo('#card' + numbers[i]).draggable({
            containment: '.section2',
            stack: '#cardPile img',
            cursor: '-webkit-grab',
            revert: false
        })
    }



    for (var i = 1; i <= 30; i++) {
        $('<div class="slot-carre">' + '</div>').data('number', i).appendTo('#cardSlots').droppable({
            accept: '#cardPile img',
            hoverClass: 'hovered',
            drop: handleCardDrop


        }).css({
            'display': 'inline-block',
                'width': '213px',
                'height': '213px',
                'margin': '15px'
        });
    }


    function handleCardDrop(event, ui) {

        ui.draggable.addClass('correct');

        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });
        ui.draggable.removeClass('ui-draggable ui-draggable-handle');


    }
});