JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>
<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper" ng-app>
    <h1>Real time vCard Creator</h1>
<div id="editor">
    <input placeholder="Company name" ng-model="cname"/>
    <input placeholder="Company tag line" ng-model="tagline"/>
    <input placeholder="Your full name" ng-model="name"/>
    <input placeholder="Your designation" ng-model="desig"/>
    <input placeholder="Phone number" ng-model="phone"/>
    <input placeholder="Email address" ng-model="email"/>
    <input placeholder="Website url" ng-model="url"/>
 <button id="saveBut">Download vCard as PNG</button>
   
</div>
<div id="card">
   
    <header>
        <h4>{{cname}}</h4>
        <p>{{tagline}}</p>
    </header>
    <div id="theBody">
        <div id="theLeft">
            <h2>{{name}}</h2>
            <h5>{{desig}}</h5>
        </div>
        <div id="theRight">
            <p>{{phone}}</p>
            <p>{{email}}</p>
            <p>{{url}}</p>
        </div>
    </div>
    
    
</div>

    
</div>

CSS

#editor{
    width:350px;
    height:100px;
    background: silver;
    margin:0 auto;
    margin-top:20px;
    padding-top:10px;
    padding-bottom:10px;
}
#card{
    width:350px;
    height:200px;
    background:whitesmoke;
    box-shadow: 0 0 2px #323232;
    margin:0 auto;
    margin-top:20px;
}
header{
    background:#323232;
    padding:5px;
}
header h4{
    color:white;
    line-height:0;
    font-family:helvetica;
    margin:7px;
    margin-top:20px;
    text-shadow: 1px 1px black;
    text-transform:uppercase;
}
header p{
    line-height:0;
    color:silver;
    font-size:10px;
    margin:11px;
    margin-bottom:20px;
}
#theBody{
    background:blue;
    width:100%;
    height:auto;
}
#theLeft{
    width:50%;
    float:left;
    text-align:right;
}
#theLeft h2{
    margin-right:10px;
    margin-top:40px;
    font-family:helvetica;
    margin-bottom:0;
    color:#323232;
}
#theLeft h5{
    margin-right:10px;
    font-family:helvetica;
    margin-top:5px;
    line-height:0;
    font-weight: bold;
    color:#323232;
}

#theRight{
    width:50%;
    float:right;
    padding-top:42px;
}
#theRight p{
    line-height:0;
    font-size:12px;
    color:#323232;
    font-family:Calibri;
    margin-left:15px;
}

JavaScript

$(function() { 
    
    $("#saveBut").click(function() { 
        
        html2canvas($("#card"), {
            
            onrendered: function(canvas) {
                
                theCanvas = canvas;

                Canvas2Image.saveAsPNG(canvas); 
               
            }
        });
    });
});