JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<table id="calendar" cellspacing="0">
<caption> Howdy today</caption>
  <tr>
    <th>Lu</th>
    <th>Ma</th>
    <th>Me</th>
    <th>Je</th>
    <th>Ve</th>
    <th>Sa</th>
    <th>Di</th>
  </tr>

  <tr>
    <td>
      <a href='event.php?d=01/02/2016'>
        <div class='full'>1</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=02/02/2016'>
        <div class='full'>2</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=03/02/2016'>
        <div class='full'>3</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=04/02/2016'>
        <div class='full'>4</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=05/02/2016'>
        <div class='full'>5</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=06/02/2016'>
        <div class='full'>6</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=07/02/2016'>
        <div class='full'>7</div>
      </a>
    </td>
  </tr>

  <tr>
    <td>
      <a href='event.php?d=08/02/2016'>
        <div class='full'>8</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=09/02/2016'>
        <div class='full'>9</div>
      </a>
    </td>
    <td class='event'>
      <a href='event.php?d=10/02/2016'>
        <div class='full'>10</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=11/02/2016'>
        <div class='full'>11</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=12/02/2016'>
        <div class='full'>12</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=13/02/2016'>
        <div class='full'>13</div>
      </a>
    </td>
    <td>
      <a href='event.php?d=14/02/2016'>
        <div class='full'>14</div>
      </a>
    </td>
  </tr>

  <tr>
    <td class='event'>
      <a href='event.php?d=15/02/2016'>
        <div class='full'>15</div>
      </a>
    </td>
    <td class='event'>
      <a href='event.php?d=16/02/2016'>
        <div class='full'>16</div>
      </a>
    </td>
    <td class='event'>
      <a...

CSS

#calendar
{
    width: 100%;
}
td {
  width: 14%;
  position: relative;
      text-align: center;
         padding: 10px;
}
td:after {
  content: '';
  display: block;
  margin-top: 100%;
}
td a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  color:black;
   padding: 10px;
}
#calendar caption
{
    color: white;
    background-color: #e74c3c;
}
#calendar tr td a:hover
{
    background-color: red;
}
/*------*/
/*----
#calendar caption
{
    color: white;
    background-color: #e74c3c;
}

#calendar td, #calendar th
{
    padding: 10px;
    text-align: center;
    background-color: white;
}

#calendar td:hover
{
    background-color: red;
}

#calendar td a
{
    color: black;
}
*/