JSFiddle - React, Tailwind, and code Playground

by learner73

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="https://rawgit.com/farhadi/html5sortable/master/jquery.sortable.js"></script>
<p class="editable editable-lg">Large Editable Text</p>

<h3>Sortable Content start:</h3>
<ul class="section-sortable">
    <li>
        <p class="editable editable-lg">Large Editable Text 1</p>        
    </li>
    <li>
        <p class="editable editable-lg">Large Editable Text 2</p>        
    </li>
    <li>
        <textarea class="form-control">Testing</textarea>       
    </li>
</ul>

CSS

.section-sortable li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

JavaScript

$.fn.editable.defaults.mode = 'inline';
$('.editable-lg').editable({
	type: 'textarea',
    pk: 1,
	title: 'Click to Edit',
	onblur:'submit'
});

$('.section-sortable').sortable();