JSFiddle - React, Tailwind, and code Playground

HTML

<?php
?>
<head>
<link href='drag3.css' rel='stylesheet' type='text/css' />
<link href='css/dragula.css' rel='stylesheet' type='text/css' />
</head>

<div class="container">
  <h1>Drag & Drop</h1>
  <p>Trying out <code>dragula.js</code>. Source <a href="https://github.com/bevacqua/dragula">here</a>.</p>
  <div class="left">
    <div id="drag-elements">
        
        <?php
        
        // Get all drivers from the database
        
        ?>
        
<div style= 'margin: 0;margin-left: auto;margin-right: auto;display: block;'>
    
<img src='http://fantasy-f1-league.com/images/drivers/Carlos_Sainz_Jr.png' width = '90'></div>
      <div>Element 2</div>
      <div>Element 3</div>
    </div>
    
    <p style = 'clar:both;'></p>

    <div id="drop-target">
    </div>
  </div>
  <div class="right">
    <div id="display">Display</div>
  </div>
</div>

<script src='js/dragula.js'></script>
<script src='js/example.min.js'></script>
<script src='drag3.js'></script>

CSS

.container {
  max-width: 960px;
  margin: 0 auto;
}

.left {
  float: left;
  position: relative;
  width: 50%;
background: #2d2d2d;
padding: 15px;
}

.right {
  float: left;
  position: relative;
  width: 40%;
  margin-left: 5%;
  height: 100%;
}

#display {
  background: #2d2d2d;
  border: 10px solid #ffffff;
  border-radius: 5px;
  font-size: 2em;
  color: white;
  height: 100px;
  min-width:200px;
  text-align: center;
  padding: 1em;
  display:table-cell;
  vertical-align:middle;
}

#drag-elements {
  display: block;
  background-color: #dfdfdf;
  border-radius: 5px;
  min-height: 50px;
  margin: 0 auto;
  padding: 2em;
}

#drag-elements > div {
    display:table-cell; 
    vertical-align:middle;
  text-align: center;
  float: left;
  padding: 1em;
  margin: 0 1em 1em 0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border: 2px solid #ececec;
  background: #ffffff;
  width:60px;
    height:60px;
  transition: all .5s ease;
}

#drag-elements > div:active {
  -webkit-animation: wiggle 0.3s 0s infinite ease-in;
  animation: wiggle 0.3s 0s infinite ease-in;
  opacity: .6;
  border: 2px solid #000;
}

#drag-elements > div:hover {
  border: 2px solid gray;
  background-color: #e5e5e5;
}

#drop-target {
  border: 2px dashed #D9D9D9;
  border-radius: 5px;
  min-height: 50px;
  margin: 0 auto;
  margin-top: 10px;
  padding: 2em;
  display: block;
  text-align: center;
}

#drop-target > div {
  transition: all .5s;
  text-align: center;
  float: left;
  padding: 1em;
  margin: 0 1em 1em 0;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  border: 2px solid skyblue;
  background: #F7F7F7;
  transition: all .5s ease;
}

#drop-target > div:active {
  -webkit-animation: wiggle 0.3s 0s infinite ease-in;
  animation: wiggle 0.3s 0s infinite ease-in;
  opacity: .6;
  border: 2px solid #000;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(2deg);
  }
  75% {
   ...