JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://stereobit.github.io/dragend/dist/dragend.min.js"></script>

<!DOCTYPE html>
<html>
<head>

  <title>Dragend JS simple demo</title>

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      border: 0;
    }

    body {
      background: #eee;
      padding: 15px;
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #demo {
      width: 500px;
      height: 500px;
      visibility: hidden;
      margin: 100px auto;
      background: #457;
      cursor: hand;
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
    }

    #demo li.first {
      background: #577;
    }

    #demo li.middle {
      background: #1e8;
    }

    #demo li.last {
      background: #e8b;
    }

    #dragend {
      position: absolute;
      bottom: 50px;
      right: 50px;
      background: #345;
      padding: 18px;
      color: #fff;
      border-radius: 3px;
      width: 150px;
      font-size: 15px;
    }

    #dragend h1 {
      font-size: 15px;
      font-weight: normal;
      margin-bottom: 12px;
    }

    #dragend a {
      text-decoration: underline;
      color: #fff
    }

  </style>

  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>

</head>
<body>

  <div id="demo">
    <ul>
      <li class="first dragend-page"></li>
      <li class="dragend-page"></li>
      <li class="middle dragend-page"></li>
      <li class="dragend-page"></li>
      <li class="last dragend-page"></li>
    </ul>
  </div>

  <div id="dragend">
    <h1>A simple <a href="http://stereobit.github.io/dragend/">dragend JS</a> demo</h1>
    <iframe src="http://ghbtns.com/github-btn.html?user=stereobit&amp;repo=dragend&amp;type=watch&amp;count=true"
 ...