JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<table class="calendar">
  <caption>
  <a href="#" class="back">«</a><span>JULY</span><a href="#" class="next">»</a>
  </caption>
  <thead>
    <tr>
      <th scope="col">SUN</th>
      <th scope="col">MON</th>
      <th scope="col">TUE</th>
      <th scope="col">WED</th>
      <th scope="col">THU</th>
      <th scope="col">FRI</th>
      <th scope="col">SAT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><time datetime="2010-6-1">1</time></td>
      <td><time datetime="2010-6-2">2</time></td>
      <td><time datetime="2010-6-3">3</time></td>
      <td><time datetime="2010-6-4">4</time></td>
      <td class="sat"><time datetime="2010-6-5">5</time></td>
    </tr>
    <tr>
      <td class="sun"><time datetime="2010-6-6">6</time></td>
      <td><time datetime="2010-6-7">7</time></td>
      <td><time datetime="2010-6-8">8</time></td>
      <td><time datetime="2010-6-9">9</time></td>
      <td><time datetime="2010-6-10">10</time></td>
      <td><time datetime="2010-6-11">11</time></td>
      <td class="sat"><time datetime="2010-6-12">12</time></td>
    </tr>
    <tr>
      <td class="sun"><time datetime="2010-6-13">13</time></td>
      <td><time datetime="2010-6-14">14</time></td>
      <td><time datetime="2010-6-15">15</time></td>
      <td><time datetime="2010-6-16">16</time></td>
      <td><time datetime="2010-6-17">17</time></td>
      <td><time datetime="2010-6-18">18</time></td>
      <td class="sat"><time datetime="2010-6-19">19</time></td>
    </tr>
    <tr>
      <td class="sun"><time datetime="2010-6-20">20</time></td>
      <td><time datetime="2010-6-21">21</time></td>
      <td><time datetime="2010-6-22">22</time></td>
      <td><time datetime="2010-6-23">23</time></td>
      <td><time datetime="2010-6-24">24</time></td>
      <td><time datetime="2010-6-25">25</time></td>
      <td class="sat"><time datetime="2010-6-26">26</time></td>
    </tr>
    <tr>
      <td class="sun"><time...

CSS

.calendar {
  background-color:#ffffff;
  border:solid 1px #ccc;
  font-size:85%;
  border-collapse:collapse;
  color:#333;
  box-shadow:0px 2px 3px #aaa;
  -moz-box-shadow:0px 2px 3px #aaa;
  -webkit-box-shadow:0px 2px 3px #aaa;
}
.calendar caption {
  background-color:#121212;
  background-image:-moz-linear-gradient(0% 95% 90deg, rgba(128, 128, 128, 0), rgba(128, 128, 128, 1));
  background-image:-webkit-gradient(linear, 0% 95%, 0% 0%, from(rgba(128, 128, 128, 0)), to(rgba(128, 128, 128, 1)));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080', EndColorStr='#121212');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080', EndColorStr='#121212')";
  font-weight:bold;
  box-shadow:0px 0px 3px #aaa;
  -moz-box-shadow:0px 0px 3px #aaa;
  -webkit-box-shadow:0px 0px 3px #aaa;
  border-radius:5px 5px 0px 0px;
  -moz-border-radius:5px 5px 0px 0px;
  -webkit-border-radius:5px 5px 0px 0px;
  color:#ffffff;
  padding:0.5em;
  text-shadow:0px -1px 1px #666;
  letter-spacing:1px;
}
.calendar caption * {
  display:inline-block;
}
.calendar caption span {
  width:80%;
}
.calendar caption a {
  text-decoration:none;
  width:10%;
  color:#999;
  text-shadow:0px -1px 0px #666;
}
.calendar caption .back {
}
.calendar caption .next {
}
.calendar thead th {
  padding:0.5em;
  border-bottom:solid 2px #cecece;
  border-right:dotted 1px #cecece;
}
.calendar td {
  padding:0.5em;
  border:solid 1px #cecece;
  text-align:center;
  font-weight:bold;
}
.calendar .today {
  background-color:#efefef;
  background-image:-moz-linear-gradient(0% 95% 90deg, #ffffff, #dbdbdb);
  background-image:-webkit-gradient(linear, 0% 95%, 0% 0%, from(#ffffff), to(#dbdbdb));/*filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef', EndColorStr='#ffffff');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef', EndColorStr='#ffffff')";*/
}
.calendar .sat {
  background-color:#d7ebfa;
 ...