JSFiddle - React, Tailwind, and code Playground

by jfragoulis

HTML

<script src="https://raw.github.com/jfragoulis/metabox/master/assets/jquery.metabox.min.js"></script>
<div class="metabox">
    <div class="metabox-header">My header</div>
    <div class="metabox-content"></div>
    <div class="metabox-footer">My footer</div>
</div>

CSS

.metabox{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin-bottom:20px;border:1px solid #ddd}.metabox-header{border-bottom:1px solid #CCC;padding:5px 10px;font-weight:bold;text-transform:uppercase;font-family:monospace;font-size:1em;letter-spacing:.2em}.metabox-header{background:#f1f1f1;background:-moz-linear-gradient(top,#f1f1f1 0,#e2e2e2 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f1f1f1),color-stop(100%,#e2e2e2));background:-webkit-linear-gradient(top,#f1f1f1 0,#e2e2e2 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e2e2e2 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e2e2e2 100%);background:linear-gradient(to bottom,#f1f1f1 0,#e2e2e2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e2e2e2',GradientType=0)}.metabox-buttons{float:right}.metabox-buttons a{margin-left:5px}.metabox-buttons a:first-child{margin-left:0}.metabox-content{border-top:1px solid #eee;padding:10px}.metabox-footer{padding:5px;background:#f1f1f1;font-size:small;text-align:right}

.metabox {
    width: 200px;
}
.metabox-loading {
    opacity: .2
}

JavaScript

$('.metabox').metabox({
    url : '/echo/html/',
    type : 'post',
    data : {
        html: "<p>Text echoed back to request</p>",
        delay: 2
    },
    loadingText:'<img src="https://raw.github.com/jfragoulis/metabox/master/assets/loader.gif" />'
});

$('.metabox').metabox('refresh');