JSFiddle - React, Tailwind, and code Playground
by Zireael
HTML
<!doctype html>
<html moznomarginboxes mozdisallowselectionprint>
<head>
<title>Barcode label demo</title>
<meta name="description" content="Barcode label demo" />
<meta charset="utf-8" />
<meta name="keywords" content="barcode, aztec, qr, label" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="WebPartPageExpansion" content="full" />
</head>
<body>
<div id="div-master"> <!-- master -->
<div id="div-page-header">
<div id="div-label-settings" class="card-settings">
<fieldset class="fieldset-card">
<legend class="legend-card"><span>Label settings<i type="icon-settings" class="icon-svg noDisplayx"></i></span></legend>
<div id="div-page-type" class="div-card-settings-field dontHide">
<label for="label-size" style="width:5.5em;text-align:left">Label size</label>
<select id="label-size" class="" style="height:1.25em;;width:10em;">
<optgroup label="Vials">
<option value="label-vial1" selected="selected" default>Small vial</option>
<option value="label-vial2">Large vial</option>
</optgroup>
<optgroup label="Boxes">
<option value="label-box1">Stability box</option>
<option value="label-box2">Big box</option>
</optgroup>
<optgroup label="Other">
<option value="label-custom">Custom label</option>
</optgroup>
</select>
<input type="button" value="Preview" class="noHide"/>
</div>
<div id="div-page-type" class="div-card-settings-field dontHide">
<label for="label-type" style="width:5.5em;text-align:left">Printout type</label>
<select id="label-type"...