Drag-and-drop cards. ReactJs

<div id="container"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.2/dragula.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

@import url(https://fonts.googleapis.com/css?family=Lato);

html, body {
  font-family: Lato, Arial, sans-serif;
  background: url(https://images.unsplash.com/photo-1680372669294-570f598ce2e5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80);
}

h3 {
  font-size: 18px;
}

p {
  font-size: 16px;
}

#left, #right {
  margin-top: 20px;
  padding-top: 20px;
  background-color : #7cafd166;
  min-height: 400px;
  
  border-radius: 15px;
}

#left {
  width: 49%;
  float: left;
}

#right {
  width: 49%;
  float: right;
}

.card {
  background-color: #fff;
  margin: 7px;
  border-radius: 10px;
  
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}

.card:hover {
  cursor: pointer;
}

.card-header {
  display: flex;
  height: 40px;
  padding:  5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  align-items: center;
}

.card-body {
  height: 50px;
  padding: 5px;
  background-color: #a8b8ed;
  display: flex;
  align-items: center;
}

class App extends React.Component {
  componentDidMount() {
    let left = document.getElementById('left');
    let right = document.getElementById('right');
    dragula([left, right]);
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "container" }, /*#__PURE__*/
      React.createElement("div", { id: "left", className: "container" }, /*#__PURE__*/
      React.createElement(Card, { body: "Card 3" }), /*#__PURE__*/
      React.createElement(Card, { body: "Card 4" })), /*#__PURE__*/
      React.createElement("div", { id: "right", className: "container" }, /*#__PURE__*/
      React.createElement(Card, { body: "Card 1" }), /*#__PURE__*/
      React.createElement(Card, { body: "Card 2" }))));
  }}


class Card extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "card" }, /*#__PURE__*/
      React.createElement("div", { className: "card-header" }, /*#__PURE__*/
      React.createElement("h3", null, "Example Card")), /*#__PURE__*/
      React.createElement("div", { className: "card-body" }, /*#__PURE__*/
      React.createElement("p", null, this.props.body))));
  }}

React.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('container'));