JSFiddle - React, Tailwind, and code Playground

by Stephen Katulka

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/7.0.0/mermaid.js"></script>
<title>Perform</title>
<button>svg to png</button>

<header>
    <a href="#">
        <img class="logo" src="/static/images/branding/long-logo.svg"/>
    </a>
    <a href="#">
        <img class="secondary-logo" src="/static/images/branding/secondary-logo.svg"/>
    </a>
</header>
<div class="mainContent">
    <div class="slipDetailsPane">
        <div class="object-name">
            <div class="object-name-info">
                <h2>
                    <div class="object-type-icon">
                        <img class="icon " src="https://vmsmkecm01.eng12.ocl:8443/icons/998dbb0e-3d96-460c-a194-2ac7319fa2ee/content"/>
                    </div>
                    <div>28/02/2017 -  - [Ministerial Response Process]</div>
                </h2>
                <div class="slipDescription">
                    
                </div>
                <div class="taskData">
                    Current task: <span>Assign Correspondence</span>
                </div>
                <div class="taskData">
                    Current assignee: <a href="#" class="link">SKGroup</a>
                </div>
                <div class="taskData">
                    Workflow due: <span>No due date</span>
                </div>
            </div>
        </div>
        <div class="mapTable">
            <h2 class="tableHeader">Task History</h2>
            <table>
                <tr>
                    <th>TASK</th>
                    <th>COMPLETED BY</th>
                    <th>STARTED</th>
                    <th>COMPLETED</th>
                    <th>CHOSEN ACTION</th>
                    <th colspan="2">COMMENT</th>
                </tr>
                <TR><TD class="incomplete">Assign Correspondence</TD><TD></TD><TD><div>28-02-2017</div><div class="timestamp">02:22:39...

CSS

@font-face {
  font-family: 'workflow';
  src:  url('fonts/workflow.eot?a5z786');
  src:  url('fonts/workflow.eot?a5z786#iefix') format('embedded-opentype'),
    url('fonts/workflow.ttf?a5z786') format('truetype'),
    url('fonts/workflow.woff?a5z786') format('woff'),
    url('fonts/workflow.svg?a5z786#workflow') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="fa-"], [class*=" fa-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'workflow' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-decision:before {
  content: "\f067";
}
.fa-join:before {
  content: "\f128";
}
.fa-split:before {
  content: "\f068";
}
.fa-manual:before {
  content: "\f004";
}
.fa-background:before {
  content: "\f000";
}
.fa-nested:before {
  content: "\f001";
}
.fa-start:before {
  content: "\f002";
}
.fa-end:before {
  content: "\f003";
}

/* BEGIN Light */
@font-face {
    font-family: 'Open Sans';
    src: url("fonts/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"),
         url("fonts/Light/OpenSans-Light.woff?v=1.1.0") format("woff");
    font-weight: 300;
    font-style: normal;
}
/* END Light */

/* BEGIN Light Italic */
@font-face {
    font-family: 'Open Sans';
    src: url("fonts/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"),
         url("fonts/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff");
    font-weight: 300;
    font-style: italic;
}
/* END Light Italic */

/* BEGIN Regular */
@font-face {
    font-family: 'Open Sans';
    src: url("fonts/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"),
         url("fonts/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff");
    font-weight: normal;
    font-style: normal; }
/* END Regular */

/* BEGIN...

JavaScript

var btn = document.querySelector('button');
    var svg = document.querySelector('svg');
    var canvas = document.querySelector('canvas');

    function triggerDownload (imgURI) {
      var evt = new MouseEvent('click', {
        view: window,
        bubbles: false,
        cancelable: true
      });

      var a = document.createElement('a');
      a.setAttribute('download', 'WORKSLIP_MAP.png');
      a.setAttribute('href', imgURI);
      a.setAttribute('target', '_blank');

      a.dispatchEvent(evt);
    }

    btn.addEventListener('click', function () {
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var data = (new XMLSerializer()).serializeToString(svg);
      var DOMURL = window.URL || window.webkitURL || window;

      var img = new Image();
      var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
      var url = DOMURL.createObjectURL(svgBlob);

      img.onload = function () {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);

        var imgURI = canvas
            .toDataURL('image/png')
            .replace('image/png', 'image/octet-stream');

        triggerDownload(imgURI);
      };

      img.src = url;
    });