JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<div id="ticket60mm" class="preview_60mm">
<!--   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPsWtQ6FhhWypYDXN0NZcYIXceqBu-D5qZ-0SIdJfC5lifYaj6" />
   -->  <div class="size-5 center">Header</div>
  
  <div class="size-1">&nbsp;</div>
  <div class="size-1 right">Normal</div>
  <div class="size-2 thin">Thin</div>
  <div class="size-3 center">Center</div>
  <div class="size-4 inverted">Inverted</div>
  <div class="size-5 bold">Bold</div>
  <div class="size-6 italic">Italic</div>
  <div class="size-7 underline">Underline</div>
</div>

<div id="ticket60mm" class="preview_80mm">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPsWtQ6FhhWypYDXN0NZcYIXceqBu-D5qZ-0SIdJfC5lifYaj6" />
  <div class="size-5 center">Header</div>
  
  <div class="size-1">&nbsp;</div>
  <div class="size-1 right">Normal</div>
  <div class="size-2 thin">Thin</div>
  <div class="size-3 center">Center</div>
  <div class="size-4 inverted">Inverted</div>
  <div class="size-5 bold">Bold</div>
  <div class="size-6 italic">Italic</div>
  <div class="size-7 underline">Underline</div>
</div>

CSS

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  background: #20262e;
  padding: 8px;
  margin: 0;
  position: relative;
  color: #39464e;
}

.preview_60mm, .preview_80mm {
  vertical-align: top;
  width: 60mm;
  min-height: 60mm;
  padding: 2mm;
  box-sizing: border-box;
  background: #FFF;
  color: #333;
  margin: 8px;
  border-radius: 1px;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.preview_80mm {
  width: 80mm;
  padding: 2mm;
}

.inverted {
  background: #333;
  color: #FFF;
}

.size-1 { font-size: 4mm; }
.size-2 { font-size: 6mm; }
.size-3 { font-size: 8mm; }
.size-4 { font-size: 10mm; }
.size-5 { font-size: 12mm; }
.size-6 { font-size: 14mm; }
.size-7 { font-size: 16mm; }

div {
  word-wrap: break-word;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bold {
  font-weight: 700;
}

.thin {
  font-weight: 100;
}

.italic {
  font-style: italic;
}

.underline {
  text-decoration: underline;
}

img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  background-color: #333;
  border: none;
}

JavaScript

const ticket60mm = document.getElementById('ticket60mm')
console.log(ticket60mm)

setTimeout(() => { // Lazy wait for loading all resources
	toJpeg(ticket60mm, { quality: 1 })
  .then(function (dataUrl) {
    var link = document.createElement('a')
    link.download = 'my-image-name.jpeg'
    link.href = dataUrl
    link.click()
  });
}, 2500)