JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html class="m0 p0 full-height">
<head>
	<title>RGB Mixing</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

	<script src="jquery.ui.touch-punch.min.js"></script>

	<style>
		.color-circle-light {
			width: 10rem;
			height: 10rem;
			border-radius: 100%;
			mix-blend-mode: screen;
			margin: 1rem;
		}

		.bg-red {
			background: red;
		}

		.bg-yellow {
			background: blue;
		}

		.bg-green {
			background: lime;
		}

    .bg-black {
      background: #000;
    }


	</style>

</head>
<body>
	<div class="bg-black">
		<div class="color-circle color-circle-light bg-red"></div>
		<div class="color-circle color-circle-light bg-green"></div>
		<div class="color-circle color-circle-light bg-yellow"></div>
		
	</div>

</body>




</html>

JavaScript

$(function() {
    $(".color-circle").draggable();
});