JSFiddle - React, Tailwind, and code Playground

by cjake

HTML

<div class="label-container">
<div class="row justify-content-start mx-0 px-1 pt-1">
    <div class="text-center">
        <img class="label-logo" src="image.png">
        <div class="visitor-logo">VISITOR</div>
    </div>
</div>
<div class="flex-row text-center label-name">
    <div>${firstname}</div>
    <div>${lastname}</div>
</div>
<div class="text-center label-company">
    ${company}
</div>
<div class="row justify-content-between mx-0 px-1">
    <div>
        <div class="label-guestof">Guest of</div>
        <div class="label-inviter">${inviter}</div>
    </div>
    <span>${uniquecode}</span>
</div>
</div>

CSS

.label-container {
  width: 350px;
  height: 188px;
}

.visitor-logo {
  font-weight: normal;
  font-size: 15px;
  color: #505659;
}

.label-name {
  font-weight: 600;
  font-size: 28px;
  color: #2B3033;
}

.label-company {
  font-weight: normal;
  font-size: 12px;
  color: #737B80;
}

.label-guestof {
  font-weight: normal;
  font-size: 10px;
  color: #737B80;
}

.label-inviter {
  font-weight: 600;
  font-size: 12px;
  color: #505659;
}

.label-logo {
  height: 28px;
  width: 60px;
}

@media print {
  
  header,
  footer,
  .print-hidden {
    visibility: hidden;
  }

  @page {
    size: auto;
    margin: 0mm;
  }

  html,
  body {
    height: 100%;
    width: 100%;
  }
 
  .print-show {
    display: block;
    position: absolute;

    width: 100vw;
    height: 100vh;
    top:0;
    bottom:0;
  }
  
  .label-container {
    width: 100%;
    height: 100%;
  }
}