JSFiddle - React, Tailwind, and code Playground

by aldosa

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <!--<h1>{{ title }}</h1>-->
</div>
<div id="title-container">
  <div class="text-uppercase" id="state-ca-chp">state of california<br />department of california highway patrol</div>
  <div class="text-uppercase" id="chp100d-title">
    Weekly Field Activity Report<br /> Motor Carrier Safety Operations
  </div>
  <div class="text-uppercase" id="chp100d-form-name">chp 100d (Rev. 8-16) opi 062</div>
</div>
<div id="date-container">
  <div class="text-uppercase header-box" id="period-and-code">
    <div class="field-spacer" id="period">
      <div>period</div>
      <div>from: 4-01-18&nbsp;<span>to: 4-07-18</span>&nbsp;<i class="fa fa-calendar"></i></div>
    </div>
    <div class="field-spacer" id="code">
      <div>division code</div>
      <div>201</div>
    </div>
  </div>
  <div class="text-uppercase header-box" id="name-and-id">
    <div class="field-spacer" id="name">
      <div>name:</div>
      <div>paul baptista</div>
    </div>
    <div class="field-spacer" id="id-number">
      <div>i.d. number</div>
      <div>A12997</div>
    </div>
  </div>
</div>

<hr />

<!--<div class="header-column">
    <div class="columns-container">
        <div class="column-title">DATE:     April</div>
        <div class="column-entry">2</div>
        <div class="column-entry">3</div>
        <div class="column-entry">4</div>
        <div class="column-entry">5</div>
    </div>
</div>

<div class="header-column">
    <div...

CSS

#title-container {
  float: left;
}

#state-ca-chp {
  font-size: 9px;
}

#chp100d-title {
  font-weight: bold;
  font-size: 17px;
}

#chp100d-form-name {
  font-weight: bold;
  font-size: 12px;
}

#date-container {
  width: 60%;
  float: right;
  border: 1px solid black;
  border-width: 1px 0 0 1px;
}

.field-spacer {
  padding: 5px;
}

.header-box {
  overflow: hidden;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

/*#period-and-code {  }*/

#period {
  float: left;
  width: 60%;
}

#code {
  float: left;
  border-left: 1px solid;
}

#name-and-id {
  margin-top: 0px;
}

#name {
  float: left;
  width: 60%;
}

#id-number {
  float: left;
  border-left: 1px solid;
}

hr {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #000;
  /* old IE */
  background-color: #000;
  /* Modern Browsers */
  width: 100%;
  float: left;
  margin-top: -1px;
  margin-bottom: 3px;
}

/*.header-column { float: left; width: 100%; }
        .columns-container { list-style: none; }
            .column-title { display: inline; 
                            padding: 0 96px 0 5px; 
                            text-align: justify; 
                            text-justify: inter-word; 
                            border: 1px solid black;
                            border-width: 0 1px 1px 0;
            } 
            .column-entry { display: inline; }*/

.rTable {
  display: block;
  width: 100%;
}

.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
  clear: both;
}

.rTableHead,
.rTableFoot {
  background-color: #DDD;
  font-weight: bold;
  width: 200px;
}

.rTableCell,
.rTableHead {
  border: 1px solid;
  border-width: 1px 1px 0 0;
  float: left;
  height: 24px;
  overflow: hidden;
  padding: 3px 1.8%;
}

.rTableCell {
  width: 30px;
}

.rTable:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.rTableBegin {
    float: left;
    height: 90px;
    background-color: #DDD;
    font-weight: bold;
   ...