JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="container">
  <h2 class="calendar__legend-title">Calendar legend</h2>
  <ul class="calendar__legend">
    <li class="is-organics"><span class="sr-only">Green:</span> Green waste collection</li>
    <li class="is-garbage"><span class="sr-only">Yellow:</span> Garbage and recycling collection</li>
    <li class="is-holiday">
      <span class="sr-only">Magenta:</span> Public holiday
      <span class="calendar__legend-meta">
        No bins are collected on this day. Collection takes place the following day.
      </span>
    </li>
  </ul>


            <div class="calendar__year">


                 <div class="calendar__month"><h2>January</h2> <table role="presentation" aria-hidden="true"><thead><tr><td><span aria-hidden="true">Mo</span> <span class="sr-only">Monday</span></td><td><span aria-hidden="true">Tu</span> <span class="sr-only">Tuesday</span></td><td><span aria-hidden="true">We</span> <span class="sr-only">Wednesday</span></td><td><span aria-hidden="true">Th</span> <span class="sr-only">Thursday</span></td><td><span aria-hidden="true">Fr</span> <span class="sr-only">Friday</span></td><td><span aria-hidden="true">Sa</span> <span class="sr-only">Saturday</span></td><td><span aria-hidden="true">Su</span> <span class="sr-only">Sunday</span></td></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td><td id="1-1-2022" class="">  1</td><td id="2-1-2022" class="">  2</td></tr><tr><td id="3-1-2022" class="is-organics is-garbage">  3</td><td id="4-1-2022" class="">  4</td><td id="5-1-2022" class="">  5</td><td id="6-1-2022" class="">  6</td><td id="7-1-2022" class="">  7</td><td id="8-1-2022" class="">  8</td><td id="9-1-2022" class="">  9</td></tr><tr><td id="10-1-2022" class="is-garbage"> 10</td><td id="11-1-2022" class=""> 11</td><td id="12-1-2022" class=""> 12</td><td id="13-1-2022" class=""> 13</td><td id="14-1-2022" class=""> 14</td><td id="15-1-2022" class=""> 15</td><td id="16-1-2022" class=""> 16</td></tr><tr><td id="17-1-2022"...

CSS

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.calendar__year {
  display: flex;
  flex-flow: row wrap;
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}
.calendar__month h2 {
  width: 100%;
}

calendar__month {
    
}

table {
  border: solid 1px black;
  border-spacing: 0;
}
thead, thead tr, thead tr td{
  background-color: rgba(200, 200, 200, .25);
  font-weight: bold;
  border: none;
}
tr {
  border-bottom: solid 1px black;
}

td {
  padding: 8px;
}

.sr-only {
  display: none;
}
.is-organics {
  background-color: rgba(8, 109, 8, .5);
}
.is-garbage {
  background-color: rgba(128, 6, 6, .5);
}
.is-holiday {
  background-color: rgba(6, 6, 128, .5);
}
.is-garbage.is-organics {
    background-color: rgba(256, 256, 256, .0);
    background-image: linear-gradient(to bottom right, #086d0880 50%, #80060680 50%);
}