JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="live-preview__container">
  <h3 class="live-preview__header">Bearing Damage Analysis</h3>

  <div class="live-preview-status-confidential"><span>draft</span></div>

  <div class="live-preview__report-number-container">
    <h3 class="live-preview__report-number">Report number: 1063</h3>
    <h4 class="live-preview__report-revision-number">Revision number: 03</h4>
  </div>

  <div class="live-preview-report-information">
    <div class="live-preview-key-value">
      <div class="live-preview-key-value__container live-preview-key-value__container--no-background">
        <div class="live-preview-key-value__row">
          <div data-key-id="reportDetails.reportDate" class="live-preview-key-value__cell">
            <div class="live-preview-key-value__key">Report Date:</div>
            <div class="live-preview-key-value__value">2/21/2020</div>
          </div>

          <div data-key-id="reportDetails.reportTitle" class="live-preview-key-value__cell">
            <div class="live-preview-key-value__key">Report Title:</div>
            <div class="live-preview-key-value__value">Joakim regression test 1</div>
          </div>
        </div>
        <div class="live-preview-key-value__row">
          <div data-key-id="reportDetails.skfCaseNumber" class="live-preview-key-value__cell">
            <div class="live-preview-key-value__key">Local SKF Report number:</div>
            <div class="live-preview-key-value__value">123</div>
          </div>
        </div>
      </div>
    </div>

    <div class="live-preview-report-information__container-column">
      <div class="live-preview-key-value">
        <div class="live-preview-key-value__header">Report Author</div>
        <div class="live-preview-key-value__container live-preview-key-value__container--single-column">
          <div class="live-preview-key-value__row">
            <div data-key-id="skfDetails.reportAuthor.name" class="live-preview-key-value__cell">
              <div...