JSFiddle - React, Tailwind, and code Playground

by hugoruscitti

HTML

<h1>
La llegada de ValentĂ­n
</h1>


<table>

<tr>
    <td class="semana">Semana 1</td>
    <td>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
    </td>
    <td class="mes" rowspan=4>
      Mes 1
    </td>
</tr>


<tr>
    <td class="semana">Semana 2</td>
    <td>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
      <span class="done"></span>
    </td>
</tr>
</table>

CSS

:root {
  --color-1: rgb(138,76,85);
  --color-2: rgb(237,212,194);
  --color-3: rgb(255,240,238);
  --color-4: rgb(255,172,29);
}

body {
  background-color: --color-2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

.mes {
  padding-left: 3em;
  border-top: 3px solid rgb(237,212,194);
}

.semana {
  padding-right: 3em;
}

h1 {
  color: rgb(138,76,85);
  padding-bottom: 1em;
}

.done {
  background-color: rgb(138,76,85);
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 100%;
}