JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th>Day</th>
    </tr>
  </thead>
  <tbody>
    <tr id="Day7" class="Day7">
      <td>7</td>
    </tr>
    <tr id="Day6" class="Day6">
      <td>6</td>
    </tr>
    <tr id="Day6" class="Day6">
      <td>6</td>
    </tr>
    <tr id="Day5" class="Day5">
      <td>5</td>
    </tr>
    <tr id="Day4" class="Day4">
      <td>4</td>
    </tr>
    <tr id="Day3" class="Day3">
      <td>3</td>
    </tr>
    <tr id="Day2" class="Day2">
      <td>2</td>
    </tr>
    <tr id="Day2" class="Day2">
      <td>2</td>
    </tr>
    <tr id="Day2" class="Day2">
      <td>2</td>
    </tr>
    <tr id="Day1" class="Day1">
      <td>1</td>
    </tr>
  </tbody>
</table>

CSS

tr td { 
  float: left;
  padding: 10px; 
  background: #ccc; 
  height: 20px; width: 20px; 
  color: #fff;
  text-align: center;
}
tr#Day2 td { background: green !important; }
tr#Day6 td { background: red !important; }

.Day1 td, .Day2 td, .Day3 td, .Day4 td, .Day5 td, .Day6 td, .Day7 td { margin: 10px 0px 0px 0px; }
.Day1 ~ .Day1 td, .Day2 ~ .Day2 td, .Day3 ~ .Day3 td,
.Day4 ~ .Day4 td, .Day5 ~ .Day5 td, .Day6 ~ .Day6 td,
.Day7 ~ .Day7 td { margin: 0px !important; }