JSFiddle - React, Tailwind, and code Playground

by annam

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/utils/Draggable.min.js"></script>

<div id="todrag">
    <input type="checkbox" id="check" />
    <label for="check">1</label>
    <input type="checkbox" id="check2" />
    <label for="check2" data-clickable=true>2</label>
    <textarea></textarea>
</div>

CSS

#todrag { width: 300px; height: 300px; background: #eee; }
input { display: none; }
label { display: inline-block; width: 100px; height: 100px; background: red; }
input:checked + label { background: green; }
textarea { width: 100px; height: 100px; }

JavaScript

Draggable.create('#todrag')