JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div class="ps-popup-outer" style="width:400px;">
	<div class="ps-popup-inner" style="height:400px;">
		<div class="box-close"><input type="button" value="Close" class="button-close"/></div>
		<div class="box-content">inner content</div>
	</div>
</div>

CSS

.ps-popup-outer{
	position:absolute; 
	top:0;
	left:0; 
	overflow:hidden; 
	padding:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius: 10px; 
	background: black; 
	}
	
.ps-popup-inner {
	text-align:left; 
	background-color:#ffffff; 
	margin:0px; 
	padding:20px;
	overflow:hidden; 
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius: 5px;
	border:0px solid #999;
	color:#333333;
	}

JavaScript

$(document).ready(function(){
	
	// Attach the jquery.ui draggable.
	$('.ps-popup-outer').draggable({ 
		cursor: "move",
		handle: ".ps-popup-outer",
        cancel: ".ps-popup-inner"
	});

});