JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"></script>
<div id="data"></div>
	<div class="wrapper">	

		<div class="items">
            <div id="green_circle" class="green-circle circles">
    
                <ul>
                <li id="brown_circle" class="brown-circle circles" >
                
                    <li id="dark_circle" class="dark-circle circles">
                        
                    </li>
                    <!--	dark ends -->
                    
                </li>
                </ul>
                <!--	bown ends -->
    
            </div>
            <!--	green ends -->
            
            <i class="icon-picture"></i>
            <i class="icon-headphones"></i>
            <i class="icon-home"></i>
            <i class="icon-envelope-alt"></i>
            <i class="icon-facetime-video"></i>
            
		</div>
        <!--	items ends -->

    </div>

CSS

@import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
.wrapper { width:350px; margin:0 auto; }
.circles{ border-radius: 50%; overflow:hidden; border: 50px solid; min-height:50px; }
.dark-circle{border-color: #D3D3D3;display:none}
.brown-circle{border-color: #A52A2A;display:none}
.green-circle{border-color: #87CEEB;}

#green_circle{}
#brown_circle{}
#dark_circle{}

 
.items {
	margin-top: 63px;
	position: relative;
}
.items i {
	width: 23px;
	display: inline-block;
	text-align: center;
	height: 20px;
	background: #A52A2A;
	color: #FFF;
	padding: 7px 6px 5px;
	border-radius: 50%;
	position: absolute;
	left: 158px;
	top: 159px;
}
.items i {
    top: -60px;
    left: 166px;
}
.items i + i {
    left: 318px;
    top: 0;
}
.items i + i + i {
    left: 388px;
    top: 159px;
}
.items i + i + i + i {
    left: 318px;
    top: 320px;
}
.items i + i + i + i + i {
    top: 380px;  left: 166px;
}

JavaScript

$( ".items i" ).draggable({
		revert: "valid",
	
		start: function( event, ui ) {
			$(this).data({
				'originalLeft': $(this).css('left'),
				'origionalTop': $(this).css('top')
			});
		},
		stop: function(event, ui){
			$(this).animate({
				'left': $(this).data('originalLeft'),
				'top': $(this).data('origionalTop')
			});
		}
	});
	$( ".circles" ).droppable({
		greedy: true,
		drop: function( event, ui ) {
			$_data	=	('drgged class = ' + ui.draggable.attr('class'));
			$_data1	=	('droped id = #' + $(this).attr('id'));
			$('#data').append($_data + '<br/>'+$_data1);
			return false;
		}
	});