JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<style>
  .rachael-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

  .rachael-table th,
  .rachael-table td {
    text-align: center;
    padding: 12px;
    border: 1px solid #ddd;
  }

  .rachael-table thead th {
    background-color: #f9f9f9;
    color: #333;
    font-weight: bold;
  }

  .rachael-table tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
  }

  .rachael-table tbody tr:hover {
    background-color: #eaeaea;
  }

  .rachael-icon {
    font-size: 1.2em;
    margin-left: 5px;
  }

  .rachael-link {
    color: #0275d8;
   + text-decoration: none;
  }

  .rachael-link:hover,
  .rachael-link:focus {
    text-decoration: underline;
  }

  .rating-star {
    color: #e6b800;
    margin-right: 4px; /* adjust spacing between stars */
  }

  .extra-icons i {
    margin-right: 5px; /* space between icons */
}

.cost-icon {
color: green; /* whatever color you need */
}

.dollar-sign {
font-size: larger;
}
</style>

<table class="rachael-table">
<thead>
<tr>
<th>Holiday</th>
<th>Type</th>
<th>Resort Accom.</th>
<th>Extra</th>
<th>Trip Cost PP</th>
</tr>
</thead>
<tbody>
  <tr>
    <td><a class="rachael-link" href="https://destinationpickleball.com/book">Valentine's Day</a><br>Feb. 13th - 16th</td>
    <td>Camp</td>
    <td>
      <i class="rating-star fa-solid fa-star"></i>
      <i class="rating-star fa-solid fa-star"></i>
      <i class="rating-star fa-solid fa-star"></i>
      <i class="rating-star fa-solid fa-star"></i>
      <i class="rating-star fa-solid fa-star"></i>
    </td>
    <td class="extra-icons">
      <i class="fa-solid fa-gift rachael-icon" style="color: #e32400;"></i>
      <i class="fa-solid fa-umbrella-beach rachael-icon"></i>
      <i class="fa-solid fa-mug-saucer rachael-icon"></i>
      <i class="fa-solid fa-car rachael-icon"></i>
    </td>
    <td>
      <i class="cost-icon fa-sharp fa-solid fa-dollar-sign"></i>
      <i class="cost-icon fa-sharp fa-solid fa-dollar-sign"></i>
      <i...