JSFiddle - React, Tailwind, and code Playground

by adamschwartz

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-wireframe.css" rel="stylesheet" />
<style>
body > p {
    font-family: "Helvetica Neue", sans-serif;
    height: 200px
}

.vex-dialog-button {
    border-radius: 0px;
}

JavaScript

vex.defaultOptions.className = 'vex-theme-wireframe';

var $vex = vex.dialog.alert({
    message: 'Message',
    onSubmit: function(e) {
        vex.showLoading(); // Show vex loader
        
        // Prevent dialog from closing now
        e.preventDefault();
        
        // Asychronously close this dialog
        setTimeout(function(){
            vex.hideLoading(); // Hide vex loader
            vex.close($vex.data().vex.id);
        }, 2000);
    }
});