JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="flex">
  <div class="flex-item">
    <h2>Canvas產生</h2>
    <div id="qrcode-canvas"></div>
  </div>
  <div class="flex-item">
    <h2>Table產生</h2>
    <div id="qrcode-table"></div>
  </div>
</div>

CSS

.flex{
  display: flex;
}
.flex-item{
  padding: 50px;
  border: 2px solid #ccc;
}

JavaScript

$('#qrcode-canvas').qrcode({
  width: 64,
  height: 64,
  text: 'https://kakadodo.github.io/'
});

$('#qrcode-table').qrcode({
	render:'table',
  width: 64,
  height: 64,
  text: 'https://kakadodo.github.io/'
});