JSFiddle - React, Tailwind, and code Playground

by navyflower

HTML

<div class="outer">
    <p>Drag the pink words to match the yellow numbers:</p>
    <div class="wrapper">
        <div class="number">1</div>
        <div class="text">three</div>
    </div>
    <div class="wrapper">
        <div class="number">2</div>
        <div class="text">one</div>
    </div>
    <div class="wrapper">
        <div class="number">3</div>
        <div class="text">five</div>
    </div>
    <div class="wrapper">
        <div class="number">4</div>
        <div class="text">two</div>
    </div>
    <div class="wrapper">
        <div class="number">5</div>
        <div class="text">four</div>
    </div>
    <hr style="clear: both"/>    
</div>

CSS

.number {
    width: 50px;
    background: Khaki;
    margin-bottom: 1px;
}
.text {
    width: 50px;
    background: Pink;
    cursor: move;
}
.wrapper {
    width: 50px;
    height: 50px;

    float: left;
    margin: 10px;
    text-align: center;
}
.outer {
    width: 200px;
    background: PowderBlue;
}

JavaScript

jQuery(document).ready(function($) {
    var opts = {
        connectWith: ".wrapper",
        items: ">.text",
        forcePlaceholderSize: true
  }
  $(".wrapper").sortable(opts);
});