JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<div id="preview" stlye="padding:10px">
    <div class="bars"></div>
    <div class="bars"></div>
</div>

<br/>
<br/>

-------- GENERATED CANVAS OUTPUT------
<div style="margin: 40px;" id="canvasImg"></div>

CSS

.bars {
    width: 200px;
    position: relative;
    height: 52px;
    width: 229px;
    vertical-align: bottom;
    margin: 20px;
}
.bars:before {
/*     -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
     */    z-index: 1;
    content:"";
    position: absolute;
    top: 0;
    left: 21px;
    height: 50%;
    width: 100%;
    background: white;
    border: 1px solid #AAA;
    border-bottom: 0;

    /* -moz-box-shadow: -2px 3px 4px 0 rgba(0, 0, 0, 0.2);
    box-shadow: -2px 3px 4px 0 rgba(0, 0, 0, 0.2);
         -webkit-box-shadow: -2px 3px 4px 0 rgba(0, 0, 0, 0.2);*/
    -moz-transform: skew(26deg, 0deg);
    -webkit-transform: skew(26deg, 0deg);
    -o-transform: skew(26deg, 0deg);
    -ms-transform: skew(26deg, 0deg);
    transform: skew(26deg, 0deg);
    border-right: 2px solid #888;
    background: rgb(255, 197, 120);
    background: -moz-linear-gradient(top, rgba(255, 197, 120, 1) 0%, rgba(253, 177, 78, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 197, 120, 1)), color-stop(100%, rgba(253, 177, 78, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 197, 120, 1) 0%, rgba(253, 177, 78, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 197, 120, 1) 0%, rgba(253, 177, 78, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 197, 120, 1) 0%, rgba(253, 177, 78, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 197, 120, 1) 0%, rgba(253, 177, 78, 1) 100%);
}


.bars:after {
    /* -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
     border-radius: 0 0 3px 3px;*/
    z-index: 1;
    content:"";
    position: absolute;
    bottom: -2px;
    left: 22px;
    height: 50%;
    width: 100%;
    background: white;
    border: 1px solid #AAA;
    border-top: 0;
    /* -moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 2px...

JavaScript

html2canvas($('#preview'), {

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