JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="preview">
    <div class="bars">
        <div class="progress" style="width:60%">&nbsp;</div>
    </div>
    <div class="bars">
        <div class="progress" style="width:20%">&nbsp;</div>
    </div>
    <div class="bars">
        <div class="progress" style="width:70%">&nbsp;</div>
    </div>
    <div class="bars">
        <div class="progress" style="width:30%">&nbsp;</div>
    </div>
    <div class="bars">
        <div class="progress" style="width:80%">&nbsp;</div>
    </div>
    <div class="bars">
        <div class="progress" style="width:20%">&nbsp;</div>
    </div>
</div>-------- GENERATED CANVAS OUTPUT------
<div style="margin-top: 20px;" id="canvasImg"></div>

CSS

.bars {
    width: 200px;
    background: #e9f6fd;
    background: -o-linear-gradient(top, #e9f6fd 0%, #bce7fc 100%);
    background: -ms-linear-gradient(top, #e9f6fd 0%, #bce7fc 100%);
    background: linear-gradient(to bottom, #e9f6fd 0%, #bce7fc 100%);
    background: -moz-linear-gradient(top, #e9f6fd 0%, #bce7fc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e9f6fd), color-stop(100%, #bce7fc));
    background: -webkit-linear-gradient(top, #e9f6fd 0%, #bce7fc 100%);
    webkit-box-shadow: inset 1px 1px 2px #bde1f5, 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 1px 1px 2px #bde1f5, 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
    height: 22px;
    width: 229px;
    vertical-align: bottom;
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    margin: 20px;
}
.progress {
    background: #24c1fc;
    position: relative;
    background: -o-linear-gradient(left, rgba(36, 193, 252, 0.3) 0%, #24c1fc 100%);
    background: -ms-linear-gradient(left, rgba(36, 193, 252, 0.3) 0%, #24c1fc 100%);
    background: linear-gradient(to right, rgba(36, 193, 252, 0.3) 0%, #24c1fc 100%);
    background: -moz-linear-gradient(left, rgba(36, 193, 252, 0.3) 0%, #24c1fc 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(36, 193, 252, 0.3)), color-stop(100%, #24c1fc));
    background: -webkit-linear-gradient(left, rgba(36, 193, 252, 0.3) 0%, #24c1fc 100%);
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(36, 193, 252, 0.3)), -o-linear-gradient(left, rgba(36, 193, 252, 0.3), #24c1fc);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0) 61%, rgba(36, 193, 252, 0.3)), linear-gradient(to right, rgba(36, 193, 252, 0.3), #24c1fc);
    background-image: -moz-linear-gradient(top,...

JavaScript

html2canvas($('#preview'), {

    onrendered: function (canvas) {
        var canvasImg = canvas.toDataURL("image/jpg");
        $('#canvasImg').html('<img src="' + canvasImg + '" alt="">');
    },
    useCORS: true,
    logging: true
});