JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="main">
  <div id="country">
    <div class="drag one">1</div>
    <div class="drag one">1</div>
    <div class="drag two">2</div>
    <div class="drag one">1</div>
    <div class="drag two">2</div>
    <div class="drag one">1</div>
    <div class="drag two">2</div>
    <div class="drag two">2</div>
  </div>

  <!-- |||||||||||||||||||||| -->

  <div id="part">
    <div class="drop" id="one">ONEE</div>
    <div class="drop" id="two">two</div>
  </div>
</div>

<!--  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script> -->

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 	-webkit-transition: all .07s linear;
	-o-transition: all .07s linear;
	transition: all .07s linear; */
}

body {
  margin: 0;
  padding: 0;
  background: url(grey.jpg) no-repeat top center / cover;
}

#main {
  min-width: 320px;
  max-width: 540px;
  /*border: 1px solid;*/
  background: rgba(192, 192, 192, .5);
  margin: 50px auto;
  overflow: hidden;
}

#country div {
  background: silver;
}


/* #country div:hover {
  border: 1px solid transparent;
} */

#country div,
#part div {
  width: 100px;
  /*background: #000;*/
  color: #fff;
  display: inline-block;
  margin: 15px;
  padding: 10px;
  text-align: center;
  border: 1px solid #E1D5D5;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#country div:hover {
  /*background: grey;*/
}

#part div {
  font: bold 16px Arial;
  padding: 25px 10px;
  cursor: default;
}

.ahover {
  background: rgba(255, 255, 255, .2);
}

JavaScript

var fnl = 0;

$(".drag").draggable({
  containment: "#main",
  scroll: false,
  revert: true,
  revertDuration: 100,
  // opacity: 0.6,
  stop: function() {
    //$(this).fadeOut("fast");
  }
});

$('#one').droppable({
  accept: ".one",
  activeClass: 'ahover',
  drop: function() {
    // $(".drag").fadeOut();
    fnl++;
    alert(fnl);
    // return fnl;
    // c+=fnl;
  }
});

$('#two').droppable({
  accept: ".two",
  activeClass: 'ahover',
  drop: function() {
    // $(".drag").fadeOut();
    fnl++;
    alert(fnl);
    // return fnl;
    // c+=fnl;
  }
});