JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="example"></div>
    <script type="text/jsx" src="hello.js">
    </script>
  </body>

CSS

body {
            margin: 0px;
        }
        .card {
            position: absolute;
        }
        .cardlist {
            height: 10000px;
            width: 10000px;
            margin: 0px;
        }

JavaScript

var dragState = null; // else {dragged: component, lastComponentX: , lastComponentY, lastMouseX, lastMouseY }

var card = React.createClass({
  getInitialState: function() {
      return {x: 0, y:0};
  },
  render: function() {
    var that = this;
    var mousedownhandler = function(e) { 
        dragState = {
            dragged: that,
            lastComponentX: that.state.x,
            lastComponentY: that.state.y,
            lastMouseX: e.pageX,
            lastMouseY: e.pageY
        };
        e.preventDefault();
        console.log("starting drag");
    };
    return (
        <div className="card"
            onMouseDown={mousedownhandler}
            style={{'top': this.state.y, 'left': this.state.x}}>
            {this.props.children}
        </div>
    );
  }
});

var cardlist = React.createClass({
  render: function() {
      return (
          <div className="cardlist"
              onMouseMove={this.handleDrag}
              onMouseUp={this.handleDragEnd}
              onMouseOut={function() {console.log("mouseout");} }>
              <card>Iz a card!</card>
              <card>foobar baz</card>
          </div>
      );
  },
  handleDrag: function(e) {
    if(dragState !== null) {
        console.log("dragging");
        var newX = e.pageX;
        var newY = e.pageY;
        dragState.dragged.setState({
            x: dragState.lastComponentX + (newX - dragState.lastMouseX),
            y: dragState.lastComponentY + (newY - dragState.lastMouseY)
        });
    } else {
        console.log("spurious mouse move");
    }
  },
  handleDragEnd: function(e) {
      dragState = null;
      console.log("dragEnd "+ e.pageX + ", " + e.pageY)
  }
});
React.renderComponent(
  <cardlist />,
  document.body
);