JSFiddle - React, Tailwind, and code Playground

by dekajp

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="tabs1" style="width:350px;height:450px">
	<ul>
		<li><a href="#fragment-1"><span>1</span></a></li>
		<li><a href="#fragment-2"><span>2</span></a></li>
		<li><a href="#fragment-3"><span>3</span></a></li>
	</ul>
	<div id="fragment-1">
	    <div id ="content1" style="width:150px" class="ui-widget-content">
           <span> <p>hello content 1 </p>
                <p>hello content 1 </p>
            </span>
        </div>
        <div id ="content2" style="width:150px" class="ui-widget-content">
           <span> 
               <p>hello content 2 </p>
                <p>hello content 2 </p>
            </span>
        </div>
    </div>    
	<div id="fragment-2"></div>
	<div id="fragment-3"></div>
</div>

JavaScript

$('#tabs1').tabs();
$('#content1').draggable({ containment: '#tabs1' });
$('#content1').resizable({ containment: '#tabs1' });
$('#content2').draggable({ containment: '#tabs1' });
$('#content2').resizable({ containment: '#tabs1' });