JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 bg-danger">
    
    <div class="row p-4">
    <div class="col-md-3">Stack</div>
    <div class="col-md-3">Absolute</div>
    <div class="col-md-3">Relative</div>
    <div class="col-md-3">Grid</div>
    </div>
    
    <div class="row p-4">
        <div class="col-md-3 dragBlok text-center"><i class="far fa-address-card fa-2x"></i></div>
        <div class="col-md-3 dragBlok text-center"><i class="far fa-image fa-2x"></i></div>
        <div class="col-md-3 dragBlok text-center"><i class="fas fa-barcode fa-2x"></i></div>
        <div class="col-md-3 dragBlok text-center"><i class="far fa-calendar-alt fa-2x"></i></div>
      </div>
      
      
    </div>
    <div class="col-md-8 p-5">
      <div class="deviceScreen" id="deviceScreen">
      </div>
    </div>

  </div>
</div>

CSS

body {
  background: #1a1a1a;
  height: 100%;
}

.deviceScreen {
  width: 411px;
  height: 823px;
  display: block;
  position: relative;
  background: #fff;
  margin: 0 auto;
}

.dragBlok {
  border: 2px solid black;
  max-height: 50px;
  padding: 5px;
  display: block;
  z-index:9999;
  }

JavaScript

$( ".dragBlok" ).draggable();
$("#deviceScreen").droppable({
  drop: function(event, ui) {
    $(this)
      .addClass("ui-state-highlight")
      .find("p");
    //.html( "Dropped!" );
  }
});