JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<h4>High Season</h4><p>
              1st July - 31st Aug
              </p><section class="p-4 d-flex justify-content-center w-100 h">
      <div class="table-responsive">
        <table class="table table-striped table-border border-light pricing">
          <thead >
            <tr>
              <th scope="col"></th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
          
            <tr>
              <th scope="row">Long weekend <br />(3 nights)</th>
              <td>£570</td>
            </tr>
            <tr>
              <th scope="row">Mid week <br />(4 Nights)</th>
              <td>£580</td>
            </tr>
            <tr>
              <th scope="row">Week <br />(7 Nights)</th>
              <td>£875</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>

CSS

/* DivTable.com */
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}