JSFiddle - React, Tailwind, and code Playground

by ishan_naithani

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<div class = 'row'>
		<div class = 'col-xs-4'>
			<h2>Heading</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
	          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
	          dolor, in sagittis nisi.</p>
	        <p><a href="#" class="btn">View details »</a></p>
		</div>
		<div class = 'col-xs-4'>
			<h2>Heading</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
	          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
	          dolor, in sagittis nisi.</p>
	        <p><a href="#" class="btn">View details »</a></p>
		</div>
		<div class = 'col-xs-4'>
			<h2>Heading</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
	          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
	          dolor, in sagittis nisi.</p>
	        <p><a href="#" class="btn">View details »</a></p>
		</div>
	</div>
	<div class = 'row'>
		<div class = 'col-xs-4'>
			<h2>Heading</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
	          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
	          dolor, in sagittis nisi.</p>
	        <p><a href="#" class="btn">View details »</a></p>
		</div>
		<div class = 'col-xs-4'>
			<h2>Heading</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
	          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a...

CSS

.placeholder {margin-left: 0 !important; border: 1px solid #ccc}

JavaScript

$('.row').sortable({
    connectWith: '.row',
    placeholder: 'placeholder'
});