JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbar">
    <div>
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
    </div>
</div>

<div id="canvas">
    <div>
        <div class="card">Card 5</div>
        <div class="card">Card 6</div>
    </div>
</div>

CSS

#toolbar {
    width:300px; height:100px;
    overflow-x:scroll; overflow-y:hidden;
}
#toolbar > div {
    position:relative;
    width:1000px; height:100%;
    background-color:yellow;
}

#canvas {
    width:300px; height:300px;
    overflow:scroll;
}
#canvas > div {
    position:relative;
    width:1000px; height:1000px;
    background-color:green;
}

div.card {
    position:absolute;
    display:table-cell;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}

JavaScript

(function () {
    $('div.card').draggable({
        appendTo: 'body',
        scroll: false
    });
})();