JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<div class="boxy">Aquila</div>
<div class="boxy">Minoan</div>
<div class="boxy">Rampant</div>
<div class="boxy">Heramin</div>
<div class="boxy">Pavo</div>
<div class="boxy">Rampavo</div>
<div class="boxy">Minavo</div>
<div class="boxy">Marlik</div>
<div class="boxy">Marlikosphinx</div>
<div class="boxy">Hieracosphinx</div>
<div class="boxy">Griferald</div>
<div class="boxy">Hippogriff</div>
<div class="boxy">Hippalectryon</div>
<div class="boxy">Pegasus</div>
<div class="boxy">Plumicorn</div>
<div class="boxy">Tillya</div>
<div class="boxy">Palinurus</div>
<div class="boxy">Trilaco</div>
<div class="boxy">Glaucus</div>
<div class="boxy">Cyerce</div>
<div class="boxy">Scythian</div>
<div class="boxy">Frizzle</div>
<div class="boxy">Minokawa</div>
<div class="boxy">Achaemenid</div>
<div class="boxy">Benedetto</div>
<div class="boxy">Fatimid</div>
<div class="boxy">MinoScythian</div>
<div class="boxy">Opinicus</div>
<div class="boxy">Byzantine</div>
<div class="boxy">Gallus</div>
<div class="boxy">Valravn</div>
<div class="boxy">Tragopan</div>
<div class="boxy">Pheasant</div>
<div class="boxy">Silkie</div>
<div class="boxy">Thracian</div>
<div class="boxy">Monoceros</div>
<div class="boxy">Qilin</div>
<div class="boxy">Longma</div>
<div class="boxy">Peadeer</div>
<div class="boxy">Aquila</div>
<div class="boxy">Minoan</div>
<div class="boxy">Deer</div>
<div class="boxy">Volitan</div>
<div class="boxy">Secretary</div>
<div class="boxy">Wyvern</div>
<div class="boxy">Gryvern</div>
<div class="boxy">Fantail</div>
<div class="boxy">Moloch</div>
<div class="boxy">Ptero</div>

CSS

.boxy {width:80px;height:30px;padding:5px;border:1px solid black;border-radius:5px;background-color:grey;}

JavaScript

$( ".boxy" ).draggable();