JSFiddle - React, Tailwind, and code Playground

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/iron-flex-layout/v2.0.0/iron-flex-layout/">
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-flex-layout-classes.html">
<dom-module id="demo-element">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <img id="steam" src="http://www.omgubuntu.co.uk/wp-content/uploads/2012/07/Steam_Logo.png" draggable="true" ondragstart="{{drag(event)}}" />
              <div class="card" id="div1" ondrop="{{drop(event)}}" ondragover="{{allowDrop(event)}}"></div>
  </template>

  <script>
    Polymer({
      is: 'demo-element',
      allowDrop:function(ev){
            ev.preventDefault();
        },
      drag: function(ev){
          ev.dataTransfer.setData("text",ev.target.id);
      },
      drop:function(ev){
          ev.preventDefault();
          var data=ev.dataTransfer.getData("text");
          console.log(ev)
          ev.target.appendChild(document.getElementById(data));
      }
    });

  </script>
  <script>Polymer({is: "demo-element"});</script>
</dom-module>
<demo-element></demo-element>