JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vitalets.github.com/x-editable/assets/poshytip/jquery.poshytip.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/poshytip/tip-yellowsimple/tip-yellowsimple.css">
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/x-editable/jquery-editable/js/jquery-editable-poshytip.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/jquery-editable/css/jquery-editable.css">
<p>Plain jQuery + poshytip</p>
<div style="margin: 150px">
    <a href="#" id="username">awesome</a>
</div>

JavaScript

$('#username').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    placement: 'top',
    title: 'Enter username'    
});



//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!';
        } else {
           this.responseText = '';  
        }
    }
});