JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="book">
  <div class="page">
    <div class="subpage padded">
      <div class="barcode">
        <!--?xml version="1.0" standalone="no" ?-->

        <svg width="156" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <desc>G-C-000000097364</desc>
          <g id="bars" fill="black" stroke="none">
            <rect x="0" y="0" width="2" height="30"></rect>
            <rect x="3" y="0" width="1" height="30"></rect>
            <rect x="6" y="0" width="1" height="30"></rect>
            <rect x="11" y="0" width="2" height="30"></rect>
            <rect x="14" y="0" width="1" height="30"></rect>
            <rect x="18" y="0" width="1" height="30"></rect>
            <rect x="22" y="0" width="1" height="30"></rect>
            <rect x="25" y="0" width="2" height="30"></rect>
            <rect x="28" y="0" width="3" height="30"></rect>
            <rect x="33" y="0" width="1" height="30"></rect>
            <rect x="37" y="0" width="1" height="30"></rect>
            <rect x="41" y="0" width="2" height="30"></rect>
            <rect x="44" y="0" width="1" height="30"></rect>
            <rect x="47" y="0" width="2" height="30"></rect>
            <rect x="50" y="0" width="3" height="30"></rect>
            <rect x="55" y="0" width="1" height="30"></rect>
            <rect x="57" y="0" width="3" height="30"></rect>
            <rect x="61" y="0" width="4" height="30"></rect>
            <rect x="66" y="0" width="2" height="30"></rect>
            <rect x="69" y="0" width="2" height="30"></rect>
            <rect x="73" y="0" width="2" height="30"></rect>
            <rect x="77" y="0" width="2" height="30"></rect>
            <rect x="80" y="0" width="2" height="30"></rect>
            <rect x="84" y="0" width="2" height="30"></rect>
            <rect x="88" y="0" width="2" height="30"></rect>
            <rect x="91" y="0" width="2" height="30"></rect>
           ...

CSS

/* First CSS file */

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizeing: border-box;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

p,
table {
  margin: 0 0 4px 0;
}

p:last-child,
table:last-child {
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0;
}

.main-table {
  margin: 0;
}

.main-table th,
.main-table td {
  border: 1px solid #000000;
}

.main-table th:first-child,
.main-table td:first-child {
  border-left: none;
}

.main-table th:last-child,
.main-table td:last-child {
  border-right: none;
}

.page {
  padding: 10px;
  margin: 25px auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  position: relative;
  /*padding: 5px;*/
  /*height: auto;*/
  height: 100%;
  /* overflow: hidden; */
}

.barcode {
  text-align: center;
}

.genotype-caption {
  width: 1px;
  padding-right: 2px;
  white-space: nowrap;
}

.half-width {
  width: 50%;
}

.mbp {
  position: absolute;
  bottom: 0;
}

.mbp td {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.bold {
  font-weight: bold;
}

.c-align {
  text-align: center;
}

@media print {
  html {
    margin: 0px;
  }
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
  .barcode div {
    box-shadow: inset 0 0 0 10000px #000;
  }
}


/* Second CSS file */

body {
  font-size: 8pt;
}

.page {
  width: 3in;
  height: 5in;
}

.subpage.padded {
  /*max-height: calc(5in - 25px);*/
  padding-bottom: 15px;
}

.label.from {
  width: 38px;
}

.label.maternal,
.label.paternal {
  width: 19px;
}

@page {
  size: 3in 5in portrait;
  margin: 0;
}

@media print {
  html,
  body {
    width: 3in;
   ...