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">
<p>We have 3 different options for your stay. 3 nights - Friday to Monday, 4 Nights - Monday to Friday or 7 Nights. If you chose to stay with us for 7 nights, you can opt to stay Monday to Monday, or Friday to Friday.</p>
<section class="p-4 d-flex justify-content-center w-100">
<div class="table-responsive">
<table class="table table-striped table-border border-light pricing">
<thead>
<tr><th scope="col"> </th><th scope="col">
<h4>Low Season</h4>
<p>1st Nov - 28/29th Feb</p>
</th><th scope="col">
<h4>Mid Season</h4>
<p>1st Mar - 30th June <br /> 1st Sep - 31st Oct</p>
</th><th scope="col">
<h4>High Season</h4>
<p>1st July - 31st Aug</p>
</th></tr>
</thead>
<tbody>
<tr><th scope="row">
<p>Long weekend <br />(3 nights)</p>
</th>
<td>£495</td>
<td>£555</td>
<td>£570</td>
</tr>
<tr><th scope="row">
<p>Mid week <br />(4 Nights)</p>
</th>
<td>£480</td>
<td>£540</td>
<td>£580</td>
</tr>
<tr><th scope="row">
<p>Full Week <br />(7 Nights)</p>
</th>
<td>£735</td>
<td>£770</td>
<td>£875</td>
</tr>
</tbody>
</table>
</div>
</section>
<h3>Christmas and New Year</h3>
<p>The dates for Christmas and New Year stays vary each year, we offer 7 night stays over the festive period. For 2023/2024 the dates are 22nd December leaving on the 29th December for Christmas and New Year arriving on the 29th and leaving on 5th January 2024.</p>