<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<div class="pen">
</div>
body {
  --pink: #FF1C68;
  --green: #14D790;
  --blue: #198FE3;
  --white: #fff;
  background: var(--white);
  font-family: 'PT Sans', sans-serif;
  height: 100vh;
  padding: 0;
  margin: 0;
 
}


.box {
  width: 100px;
  height: 100px;
  background: var(--pink);

}


const Square = posed.div({
  draggable: true,
  x: ({ x }) => x
})


const Example = () => <Square className="box" pose="initial" x={70} />



ReactDOM.render(
  <Example />,
  document.querySelector('.pen')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/react-pose@1.1.4/dist/react-pose.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.development.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.development.js