JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<div class="container">
     <h1>X-editable starter template</h1>

    <div> <span>Username:</span>
 <a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a>

    </div>
    <div> <span>Status:</span>
 <a href="#" id="status"></a>

    </div>
</div>

JavaScript

$(document).ready(function () {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'inline';

    //make username editable
    $('#username').editable();

    //make status editable
    $('#status').editable({
        emptytext: 'Leer',
        type: 'select',
        title: 'Select status',
        placement: 'right',

        source: [{
            value: 1,
            text: 'status 1'
        }, {
            value: 2,
            text: 'status 2'
        }, {
            value: 3,
            text: 'status 3'
        }]
    });
});