JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
    <div class="card-stack-container">

      <div class="card-stack-placeholder"></div>    

      <div class="card card1"></div>
      <div class="card card2"></div>
      <div class="card card3"></div>

    </div>

    <div class="card-layoff-container">

      <div class="card-layoff-placeholder"></div>
      <div class="card-layoff-placeholder"></div>
      <div class="card-layoff-placeholder"></div>
      <div class="card-layoff-placeholder"></div>

    </div>


    <div class="card-play-area">

      <div class="card-column-placeholder"></div>
      <div class="card-column-placeholder"></div>
      <div class="card-column-placeholder"></div>
      <div class="card-column-placeholder"></div>

    </div>

CSS

body, html {
	height: 100%;
	min-height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    font-family: combo, cursive;
    background-color: rgb(2, 61, 39);

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: moz-none;
	-ms-user-select: none;
	user-select: none;
}

.right {
	float: right;
}

.card-container {
	position: relative;
}

.card-layoff-placeholder,
.card-column-placeholder {
	box-sizing: border-box;
}

.card-layoff-placeholder {
	background-color: rgb(10, 86, 58);
	width: 110px;
	height: 150px;
	border-radius: 5px;

}

.card-column-placeholder {
	border: 1px solid rgb(10, 86, 58);
	width: 110px;
	height: 400px;
	/*position: relative;*/
	
}

.card-column-placeholder .card {
	margin-top: 30px;
}

.card-column-placeholder > .card:first-child {
	margin-top: 0;
	background-color: #CCC;
}



.card-column-placeholder.hovered {
	border-color: rgb(84, 86, 10);
}

.card-column-placeholder,
.card-layoff-placeholder {
	float: left;
	margin: 10px 5px;
}

.card-layoff-container {
	overflow: auto;
}

.card-stack-container {
	border: 1px solid rgb(10, 86, 58);
	width: 415px;
	height: 200px;
	padding: 10px;
}

.card {
	background-color: rgb(253, 252, 230);
	width: 98px;
	height: 138px;
	border-radius: 5px;
	display: inline-block;
	position: absolute;

	font-size: 1.4rem;

}

.card-value {
    margin-left: 3px;
}

.hearts, .diams {
	color: red;
}

.card-stack {
	float: left;
	position: absolute;
}

.card1 {
	left: 150px;
    background-color: red;
}

.card2 {
	left: 175px;
    background-color: green;
}

.card3 {
	left: 200px;
    background-color: blue;
}


.card-stack-placeholder {
	background-color: rgb(10, 86, 58);
	width: 100px;
	height: 140px;
	border-radius: 5px;
	float: left;
}

JavaScript

$('.card').draggable({
 	revert: 'invalid',
 	drag: handleDrag
 });

 $('.card-column-placeholder').droppable( {
 	accept: '.card',
 	hoverClass: 'hovered',
 	drop: handleCardDrop
 });


 function handleCardDrop(event, ui) {

var card = $(ui.draggable);
 	var column = $(this);

 	var cardsInColumn = column.find('.card');

 	if (cardsInColumn.length == 0) {

 		card.detach()
 		.appendTo(column);

 		card.css({
 			top:  $(this).position().top + 16,
 			left: $(this).position().left + 11
 		});

 	} else {

 		
 			card.detach()
 			.appendTo(cardsInColumn.last());

 			card.css({
 				top:  0,
 				left: 0
 			});	

	}

}


function handleDrag(event, ui) {

	var offset = $(this).offset();
	var x = offset.left;
	var y = offset.top;

	var cards = $(this).parent().find(".card");

	console.log(ui.draggable);

	if (cards.length > 1) {

		$(cards).each(function(index, card) {


		});

	}
}