JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<script src="http://svg-edit.googlecode.com/svn/branches/2.7/editor/svgedit.compiled.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/js-hotkeys/jquery.hotkeys.min.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/jquerybbq/jquery.bbq.min.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/svgicons/jquery.svgicons.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/jgraduate/jquery.jgraduate.min.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/spinbtn/JQuerySpinBtn.min.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/touch.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
<script src="http://svg-edit.googlecode.com/svn/branches/stable/editor/jgraduate/jpicker.js"></script>
<div id="svg_editor">

<div id="rulers">
	<div id="ruler_corner"></div>
	<div id="ruler_x">
		<div>
			<canvas height="15"></canvas>
		</div>
	</div>
	<div id="ruler_y">
		<div>
			<canvas width="15"></canvas>
		</div>
	</div>
</div>

<div id="workarea">
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
<div id="svgcanvas" style="position:relative">

</div>
</div>

<div id="sidepanels">
	<div id="layerpanel">
		<h3 id="layersLabel">Layers</h3>
		<fieldset id="layerbuttons">
			<div id="layer_new" class="layer_button"  title="New Layer"></div>
			<div id="layer_delete" class="layer_button"  title="Delete Layer"></div>
			<div id="layer_rename" class="layer_button"  title="Rename Layer"></div>
			<div id="layer_up" class="layer_button"  title="Move Layer Up"></div>
			<div id="layer_down" class="layer_button"  title="Move Layer Down"></div>
			<div id="layer_moreopts"...

CSS

.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar...