JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="coloring">
  <ul class="platesSet plate1 sortableColors" style="margin-right: 19%;">
      
  </ul>
  <ul class="platesSet plate2 sortableColors">
    
  </ul>
</div>

<div id="rgb">
  <ul class="shadesRed colors sortableColors" style="background-color: #ffe0e0">
    <li class="scarlet color" style="background-color: #FF2400;"></li>
    <li class="ruby color" style="background-color: #E0115F;"></li>
    <li class="crimson color" style="background-color: #DC143C;"></li>
    <li class="salmon color" style="background-color: #FA8072;"></li>
  </ul>

  <ul class="shadesGreen colors sortableColors" style="background-color: #e0ffee">
    <li class="emerald color" style="background-color: #50C878;"></li>
    <li class="olive color" style="background-color: #808000;"></li>
    <li class="teal color" style="background-color: #008080;"></li>
  </ul>

  <ul class="shadesBlue colors sortableColors" style="background-color: #c9ebff">
    <li class="river color" style="background-color: #3498db;"></li>
    <li class="munsell color" style="background-color: 	#0093AF;"></li>
    <li class="uranian color" style="background-color: 	#AFDBF5;"></li>
  </ul>
  
  <ul class="colors sortableColors" style="width: 40%;background: #000">
    
  </ul>
</div>

CSS

body {
  background: #fff;
}

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

#coloring {
  background-color: #7f8c8d;
  min-height: 100px;
}

#rgb {
  background-color: #7f8c8d;
  min-height: 200px;
  box-sizing: border;
}

.colors {
  background: #ecf0f1;
  float: left;
  width: 20%;
  min-height: 100px;
}

.color {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
}

.platesSet {
  display: inline-block;
  width: 40%;
  min-height: 100px;
  background: #fff;
}

JavaScript

$( ".platesSet, .colors" ).sortable({
    connectWith: ".sortableColors",
}).disableSelection();