JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<body>

<div class="row">
  <div class="column1" >
  <p><a href="#01">Overview</a></p>
  <p><a href="#01">Vehicle Fleet Purpose</a></p>
  <p><a href="#03">Driver Qualifications</a></p>
  <p><a href="#04">Driving Record Policy</a></p>
  <p><a href="#05">Employer Pull Notice</a></p>
  <p><a href="#06">Driving Record Grading Criteria</a>
  <p><a href="#07">Commute Use</a></p>
  <p><a href="#08">Personal Use</a></p>
  <p><a href="#09">Use Requirements</a></p>
  <p><a href="#10">Personal Vehicles Used on Company</a></p>
  <p><a href="#11">Business</a></p>
  <p><a href="#12">Traffic Violations</a></p>
  <p><a href="#13">Incidents Involving Company Vehicles</a></p>
  </div>
  
  
  
  
  <div class="column2" style="border-left: solid 1px black;">
<p><a id="01"><b>Overview</b></a><br>
The authorized driver of a Company vehicle has been provided certain privileges with its use. The authorized driver assumes the duty of obeying all motor vehicle laws, maintaining the vehicle properly at all times, and following the policies and procedures outlined below.</p>

<p><a id="02"><b>Vehicle Fleet Purpose</b></a><br>
Company vehicles are provided to support business activities and are to be used only by qualified and authorized employees. In all cases, the vehicle is to be operated in strict compliance with motor vehicle laws of the jurisdiction in which they are driven and with the utmost regard for their care and cost efficient use.</p>
<ul>
<li>Company vehicles may not be used for business activities of other companies.</li>
<li>Company vehicles may not be driven to Mexico or Canada without prior approval from the Company President.</li>
<li>Company vehicles may not be driven out of State without prior approval from the Company President.</li>
</ul>

<p><a id="03"><b>Driver Qualifications</b></a><br>
New employees must meet the following requirements prior to being assigned driving duties and allowed to drive Company vehicles:</p>
<ol>
<li>Must be authorized by the...

CSS

@import url(https://fonts.googleapis.com/css?family=Muli);
  body {
 font-family: Muli, sans-serif;
 font-size: 16px;
 }
* {

  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column1 {
  float: left;
  width: 30%;
  padding: 10px;
 }

.column2 {
  float: left;
  width: 70%;
  padding: 10px;
 }

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

td, tr {
border: solid 1px black;
text-align: center;
padding: 5px;
}